Tuesday, August 24th, 2010
The last month has seen an interesting back and forth over CSS Media Queries. In a nutshell, CSS Media Queries make it possible to apply style sheets only if certain properties are available on the display device. For example, you could have a stylesheet only display for screen devices with a maximum screen width of 480px (i.e. a mobile device) using the following CSS Media Query, bolded below:
- <link rel="stylesheet" type="text/css"
- media="screen and (max-device-width: 480px)"
- href="shetland.css" />
Things started to get interesting with a counter-article by Jason Grigsby titled “CSS Media Query for Mobile is Fool’s Gold“. Jason claims:
Unfortunately, CSS media query is fool’s gold for mobile devices. It hides tough problems and gives developers a false promise of a simple solution for designing to multiple screens.
His chief issues with CSS Media Queries can be boiled down to:
The idea of adding more code—adding more to download—in order to optimize for mobile should be the first clue that this isn’t a good solution.
From a high level his other objections are:
- That speed matters more on mobile devices
- That letting the browser scale images for you is a bad idea since delivering images at the maximum size then scaling them down is wasteful on mobile devices
- That resizing images on mobile browsers is cpu and memory intensive, both of which mobile devices can lack
Jason also discusses some interesting workarounds people have proposed for the above issues still using CSS Media Queries, such as delivering different images at different sizes using different CSS Media Queries and using hidden CSS background images but:
However, the iPhone still downloads the images even though they are not displayed.
He does find some workarounds but there are issues:
Two methods that appear to work are:
- Setting the parent of an element with a background image to display:none.
- Using media query min-width declaration to only specify a minimum browser width for the desktop image and a max-width for the mobile image does result in only the mobile image being downloaded in Mobile Safari.
These two options mean that using CSS media queries isn’t completely impossible, but using the parent element to hide images and changing existing desktop CSS to add min-width declarations are significant changes to existing CSS. It isn’t going to be as simple as adding a CSS media query for mobile and calling your job done.
In the end Jason argues for separate web sites for mobile, but:
There are some good uses of CSS media queries. If you’re building a discrete web application where you have more control and can make sure that the desktop web isn’t bloated, it can make sense.
Also, Ros Hodgekiss from Campaign Monitor wrote an exceptional article on how you can use media queries in html email to provide a mobile optimized layout. This is perhaps the ideal use case because when you send html email, you have no choice but to send a single html document regardless of what device the recipient will be using.
On Tuesday Jason Grigsby challenged the conventional view that media queries are all we need to make a website mobile-friendly. Although he’s right when he points out some serious problems, I do not think that media queries are the “fool’s gold,” as Jason says. The message seems to be more that media queries alone are not enough to make your sites mobile-friendly. An additional component is required.
PPK argues that CSS Media Queries have their place:
Media queries are silver bullets when it comes to pure CSS. Restricting the width of your site, moving sidebars and main navigations elsewhere, media queries can do all that and more.
He then talks about a nifty way to pair up JS and CSS Media Queries:
device-widthmedia queries with the values of
This is a general rule. All mobile browsers that support media queries exhibit these pairings. It’s hard to believe, but I haven’t found any exceptions yet — and rest assured that I searched for them, because I could not believe that it would be this simple. And I will continue to keep an eye on this and report problems as soon as I find them.
When these scripts are added to media queries, we’re a whole lot closer to making one website that reacts to a mobile (or rather, a narrow-screen) environment both in its CSS and in its asset management.
Tell me below whether you think CSS Media Queries are your friend or foe?
Posted by Brad Neuberg at 6:00 am