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

Question

I use GWT ClientBundle and CssResource to use my css definitions.

I want to set viewports depending on screen size. Do you know how to achieve this in CssResource?

My unsuccessful attempt ... for ease of testing, I 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] The compiler generates a warning: [WARN] Line x column 12: collided with a "screen". Expected one of: "{" ","

Just a warning, but in this case it cannot be ignored.

Answer 1

If this is a small change, you can also use @eval as a workaround 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] does not support media queries. If you want to use it, you have to do a workaround:

• In the interface of your client package, mark the source css as TextResource:

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

• Go to the entryPoint class and enter your resource:

  (. AppBundle.INSTANCE.carouselCss () GetText ())

  StyleInjector.inject;

This way you lose the MyCss interface, which extends from CssResource and allows you, among other things, to call the css class from UIBinder. But at least you can use media queries.

Answer 3

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

One nice workaround suggested by Bart Guith is to place the “only screen and (maximum width: 480 pixels)” CSS into a separate file and dynamically insert the generated CSS text into 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 in 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 proposed by user TextResource , but has the added benefit that you can use obfuscated CSS class names and other CssResource features.

Answer 4

I know it's a little late since the question was asked first, but I have had the same problem lately.

My answer is similar to the one suggested by Daniel Trebbien, but with slight modifications.

I do everything in the main class of this section because I have several sections in one project.

Initialize the variables first:

  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 resource 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” as css:

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