1. The problem with GWT's conditional CSS is that it is evaluated once, at the time the CSS resource is processed, which means that you won't get runtime changes if the user changes the window size (or a mobile user changes the orientation).
2. The problem with media queries in the CSS is that GWT's CSS resources don't (as of the last time I looked) support them.
3. Another problem with media queries is that IE6-8- don't support them.
My solution has been to:
1 & 2: have a separate CSS resource for each media query, but without the query within it. Instead, get the CSS string from the resource and wrap the query around it yourself, and then inject the resulting string.
3: have yet another variation of each resource, for IE6-8, where there is a marker class in front of every selector, like:
Base resource for @media (min-width: 400px) and (max-width: 639px):
.special { color: red; }
IE6-8 version:
@external .ie_400_639;
.ie_400_639 .special { color: red; }
Then, for IE6-8, use a window resize handler to manage adding the appropriate class to the html tag (and, of course, removing any outdated class). Run that when the entrypoint class loads as well.
Yeah, part 3 is a pain to manage - I ended up creating a Java tool to manually run the CSS through to create the IE versions using a horrendously complicated RegEx.
On Tuesday, September 17, 2013 4:12:10 PM UTC-4, Joshua Godi wrote:
-- 2. The problem with media queries in the CSS is that GWT's CSS resources don't (as of the last time I looked) support them.
3. Another problem with media queries is that IE6-8- don't support them.
My solution has been to:
1 & 2: have a separate CSS resource for each media query, but without the query within it. Instead, get the CSS string from the resource and wrap the query around it yourself, and then inject the resulting string.
3: have yet another variation of each resource, for IE6-8, where there is a marker class in front of every selector, like:
Base resource for @media (min-width: 400px) and (max-width: 639px):
.special { color: red; }
IE6-8 version:
@external .ie_400_639;
.ie_400_639 .special { color: red; }
Then, for IE6-8, use a window resize handler to manage adding the appropriate class to the html tag (and, of course, removing any outdated class). Run that when the entrypoint class loads as well.
Yeah, part 3 is a pain to manage - I ended up creating a Java tool to manually run the CSS through to create the IE versions using a horrendously complicated RegEx.
On Tuesday, September 17, 2013 4:12:10 PM UTC-4, Joshua Godi wrote:
Why not try using responsive css with media queries? You can change the dimensions/background-url for the images and such.Here is a good source for standard media queries: http://css-tricks.com/snippets/css/media- queries-for-standard-devices/
On Saturday, September 14, 2013 8:40:46 AM UTC-5, Ed wrote:How can I use different CSS files, and different code for different Browsers or devices?What I want:For the desktop web browser, I show all of the applications functionality with images of different resolution.However, on a Tablet (iPad) I show the same application but with different images/resolution.And for the smartPhone (iPhone, Samsung S4), I show only restricted application functionality with different images/resolution (different buttons).How can this best be done to optimal use GWT (code splitting, code minimization, etc...) ?My thoughts: Use different Factory classes for different Browsers/devices. These factories classes will then create the required Client Bundles and Controller (to modify app code) classes.Then select the correct factory through GWT config files by indicating the required "user.agent" property.Is this the way to go ? Or/And maybe use Mgwt and let it handle it (haven't used mgwt yet)... ?Please your experience/advice?
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.
No comments:
Post a Comment