GWT CssResource and using @media to support both large and small screens

Question

I'm using GWT's ClientBundle and CssResource to pull in my css definitions.

I'd like to set viewports depending upon screen size. Do you know how to achieve this within CssResource?

My failed attempt... for ease of testing I've used background shades instead. But for all devices the background is green.

body {background-color:green;}

@media only screen and (max-width:480px) {
body {background-color:red;}
}

GWT [v2.5] Compiler kicks out a warning: [WARN] Line x column 12: encountered "screen". Was expecting one of: "{" ","

Just a warning but in this case it's not to be ignored.

Answer 1

If is a little change you may use as workaround too @eval as follows

@eval BG_COLOR com.google.gwt.user.client.Window.getClientWidth()<480?"red":"green";  

body {background-color:BG_COLOR;}

Answer 2

GWT [v2.5] doesn't support media queries. If you want to use it you have to do a workaround:

• In your Client bundle interface mark your source css as TextResource:

  @Source("mycss.css") TextResource myCss();

• Go to your entryPoint class and inject your resource:

  StyleInjector.inject(AppBundle.INSTANCE.carouselCss().getText());

By doing this, you lose the interface MyCss that extends from CssResource and allows you to call the css class from the UIBinder, among other things. But, at least, you can use media queries.

Answer 3

Support for CSS2 @media rules (e.g. @media print { /* ... */ }) was added to GWT 2.5.1. However, CSS3 @media rules are not supported yet; that's Issue 8162 - CSSResource and CSS3.

One nice work-around suggested by Bart Guijt is to place the "only screen and (max-width:480px)" CSS into a separate file and dynamically inject the generated CSS text within the @media rule.

If you have:

public interface MyResources extends ClientBundle {
    @Source("my.css")
    public MyCssResource desktopCss();

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

Then within your EntryPoint you would add:

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

This is similar to the TextResource work-around suggested by user1311201, but has the added benefit that you can use obfuscated CSS class names and other CssResource features.

Answer 4

I know is a bit late since the question was first asked, but I had the same problem recently.

My answer is similar to the one suggested by Daniel Trebbien, but with minor changes.

I do all in the the main class of this section, for I have several sections in the same project.

First, initialize the variables:

    private final CssResource style;
    private final TextResource mobile;

In the resource class, inside the main class:

    @Source("main.css")
    CssResource style();

    @Source("mobile.css")
    TextResource mobile();

Outside the resources class, but in the main class:

 private void scheduleFinally() {
        StyleInjector.injectAtEnd("@media screen and (max-width:900px) {" +
                this.resources.mobile().getText() +
            "}");
    }

Then, I kind of "initialize" both css:

    this.style = this.resources.style();
    this.style.ensureInjected();

    this.mobile = this.resources.mobile();
    scheduleFinally();