Currently CSS @media queries aren't supported yet in GWT. What are good
work arounds?
My list:
1) The css files that contains the @media queries is included a
TextResource in your ClientBundle and injected through
StyleInjector.inject().
2) The css file doesn't contain @media queries is included as CssResource
in your ClientBundle and injected through StyleInjector.inject() just after
the injected string is wrapped in a media query.
Example: StyleInjector.inject("@media (max-width: 639px): {" + CSS CONTENT
+ ");
3) Using the JS window.matchMedia() function to detect and listen to media
changes. When the listener is informed, change the injected style by
selecting the correct CssResource in your ClientBundle.
4) Add an extra style to the body (or any other root div you use) that
represents the current media and use "descendant selectors" in your css to
select the correct style. You can use JS window.matchMedia() function or
Window resize listener to detect screen size changes and change the root
style.
5) ??...
The list of pro/cons (that I can intially think of):
1)
Pro: easy and works
Con: nasty hack, no use of GWT CssResource functionality like MD5 naming
and compiler checks.
2)
Pro: easy and works, and using the GWT CssResource functionality like
naming and compiler checks.
Con: nasty hack..
3)
Pro: flexible and works.
Con: Jsni wrapping, risk of memory leaks because of listeners not being
cleaned/removed.
4)
Pro: easy, common, works in older browser.
Con: deep descendant selectors results in less performance.
Refs:
a) Mgwt uses 1).
b) 2) can be found in several js lib's and this gwt
post<https://groups.google.com/forum/#!topic/google-web-toolkit/6kNfG41TVBY>
c) Example code of using 3:
linke<https://hacks.mozilla.org/2012/06/using-window-matchmedia-to-do-media-queries-in-javascript/>
Please add your input to the lists?
What do you prefer?
--
You received this message because you are subscribed to the Google Groups
"Google Web Toolkit" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
Visit this group at http://groups.google.com/group/google-web-toolkit.
For more options, visit https://groups.google.com/groups/opt_out.
