In light of increasing browser support for CSS3 media queries, I have spent some time today updating the transformer layout plugin in an attempt to achieve a seamless integration of the new CSS3 functionality for including stylesheets dependent on the browser’s current viewport width.
Most media query implementations I have seen use
px units to define
max-width limits. This approach is fine for browsers that zoom, but less than ideal for browsers that don’t. Not a huge issue when you consider that the modern browsers that support media queries all zoom by default! But for transformer layout to retain support for older browsers that don’t zoom,
em units would be the way to go.
Firstly, I ran some tests of current browser support for CSS3 media queries using
em units, the results were:
- Firefox (3.6.2) and Opera (10) support media queries with
emunits and load the correct stylesheet after zoom level change.
- Chrome (4) and Safari (4) support media queries with
emunits but fail to load the correct stylesheet after zoom level change.
- IE (6, 7 and 8 ) do not support media queries at all.
Alexander Farkas has a nice solution for detecting media query support and supplementing for non-supporting browsers but unfortunately it doesn’t support
em units or compensate for Safari and Chrome’s insufficient handling of zoom level changes.
The new transformer layout plugin takes Alexander’s great work and rectifies both of those limitations so now it can be used to achieve an approach to layout optimised for all browsers, devices, resolutions, text sizes and zoom levels.