CSS @Media queries work arounds?

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

c) Example code of using 3: linke

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 google-web-toolkit+unsubscribe@googlegroups.com.
To post to this group, send email to google-web-toolkit@googlegroups.com.
Visit this group at http://groups.google.com/group/google-web-toolkit.
For more options, visit https://groups.google.com/groups/opt_out.