Media-dependent selectors are not supported properly in ClientBundle

Found in GWT Release (e.g. 1.5.3, 1.6 RC):

GWT 2.0.3

Encountered on OS / Browser (e.g. WinXP, IE6-7, FF3):

Win Vista x64, FF3, IE8

Detailed description (please be as specific as possible):

I use media-dependent selectors in my CSS (see http://www.w3.org/TR/CSS2/media.html for more details).

Here is a snippet:

@media screen { tr.sortable_cursor td { border-bottom: 1px dashed black; border-top: 1px dashed black; } } @media print { tr.sortable_cursor td { border: medium none; } }

As soon as I try to bundle it via introducing a CssResource extension:

public interface SortableCssResource extends CssResource {

String sortable_cursor();

}

this css stops working: i.e cursor is invisible no matter if I print HTML (media == print) or if I watch it on-screen (media == screen).

Shortest code snippet which demonstrates issue (please indicate where actual result differs from expected result):

see above

Workaround if you have one:

have not found one yet...

But I would propose to either support the @media tags or introduce support for media conditions like

@if media print { ... } @else { ... }

Links to relevant GWT Developer Forum posts:

It would be great to be able to specify different media within my .ui.xml file in UiBinder.

The terrible workaround i'm attempting to employ I (1) include a in my module's gwt.xml. The stylesheet has an @media print block. (2) I assign the classes contained within that stylesheet to my widgets.

Using this method is pretty unsatisfactory since none of the classes contained within the print stylesheet are managed by GWT.

The problem with this workaround is that any styles injected after associating the print in your .gwt.xml file will overwrite said stylesheet.

Since UiBinder does exactly this, this workaround becomes tricky for any such widgets.

I think the only workarounds would be to either: (1) Make your @media print{} selectors always more specific than your CssResource selectors. So the @media print stylesheet would have "div.whatever" when you know they will apply only to simplepanels rather than just ".whatever"

or (2) have a print button that downloads the print css file, injects its data (without turning into a CssResource!), then calls window.print(). This would ensure that all widgets have their styles correctly overridden in the print media.

Really we just need to have @media selector support in CssResource =o

It almost looks like there is support for this via com.google.gwt.resources.css.ast.CssMediaRule and com.google.gwt.resources.css.GenerateCssAst.GenerationHandler.startMedia(SACMediaList). However the selector list looks like its always empty when I step through it. Does @media support end at ensuring that no log warnings are shown?

This support is particularly useful for mobile GWT applications. I have an app that uses a single CSS to layout appropriately for regular browsers, tablets, and phones and renders specifically for different orientations. It would be very helpful to be able to just use this single CSS with UIBinder so my app can push all the layout work for different screen sizes/orientations to the CSS rather than having to do any specific tricks in the application itself.

Here's a workaround that seems to be working for me:

@Shared public interface MyCss extends CssResource { String someCssRule(); }

public interface PrintCss extends MyCss { }

/* mycss.css */ .someCssRule { }

/* print.css / .someCssRule { / print styles */ }

Then instead of calling .ensureInjected() on my printCss object, I do this: String printCssStr = printCss.getText(); printCssStr = "@media print { " + printCssStr + " }"; StyleInjector.injectAtEnd(printCssStr);

Thanks for posting your workaround, I was able to successfully implement media selectors for mobile devices.

I implemented the workaround slightly differently (GWT 2.4.0):

interface MyResources extends ClientBundle { @Source("my.css") MyStyles css();

@Source("my-mobile.css") MyStyles mobileCss(); }

// No @Shared necessary interface MyStyles extends CssResource { ... }

static final MyResources resources = GWT.create(MyResources.class); static { resources.css().ensureInjected(); String mobileCss = "@media only screen and (max-width: 480px) {" + resources.mobileCss().getText() + "}"; StyleInjector.injectAtEnd(mobileCss); }

In short: No @Shared annotation, no extra subtype of CssResource.

This issue was reported more than two years ago, and it still has "Status: New"? And its not like this is some minor corner case, css media tags are major advantage, and I seriously need to consider to just use good old html+css+javascript on this project, although I really dislike javascript...

Hello!

I've got a patch against trunk (or master -- whatever its called these days!) that fixes the problem. It turns out to have been a simple typo in CssNodeCloner, where the cloned node wasn't populated correctly. The patch is attached.

You can apply the patch against the GWT source tree with something like: patch -p0 < /path/to/media.patch

What is the right way to get this considered for inclusion in the official tree -- assuming Google and the GWT steering committee approve of the fix?

http://gwt-code-reviews.appspot.com/1862803/

Thanks a lot! I will review it and submit it to trunk shortly.

Fix submitted as of r11367

Will there be a 2.5.1 bugfix release? :)

I am not aware of concrete plans for the next GWT release. You may get a better answer on the GWT mailing list (at https://groups.google.com/forum/?fromgroups#!forum/google-web-toolkit)

since we are running 2.5.1 from trunk all Fixed not released issues go into it

I've downloaded 2.5.1RC1 today, but @media still doesn't seem to be working for me. It only seems to accept @media screen. If you try to add anything more sophisticated (e.g. @media only screen and (max-width: 480px)), it gives warnings and doesn't pick up the CSS within the {}

Can someone please give a working code example of how this should be used?

Thanks in advance

So far GWT only accepts CSS2. So "@media screen" and "@media screen, print" will work. See http://www.w3.org/TR/CSS2/media.html. CSS3 is not supported, though.

bulk edit: setting fixed issues for GWT 2.5.1 to Fixed

Is there any plans to support css3 media queries e.g. @media screen and (max-width: 800px) { ... }

@fungus1487: that's issue 8162.