I’ve read a number of articles about the best approach for delivering content to mobile devices using CSS3 Media Queries, including Ethan’s article at A List Apart. While the general consensus seems to be “be careful”, I decided to do some testing of my own. Of course this “be careful” attitude is because, done incorrectly, you can cause a mobile device to download much more than you think. Oh, and there’s also the problem of that pesky Internet Explorer thingy… The question that I wanted answered is simply “what does a mobile device download when encountering a page using media queries?”

First, I created a simple page that contains a few boxes (list elements styled with CSS). In addition to text, one of the boxes contains an image that I used for a subsequent test. The page also has a background image that I want to swap out when the viewport changes orientation. The CSS to make that happen looks like this (other irrelevant code omitted):

@media screen and (orientation:landscape) {
body {
background: url(img/oia.jpg) no-repeat top center;
}
}
@media screen and (orientation:portrait) {
body {
background: url(img/nighttime.jpg) no-repeat top center;
}
}

For the purists among you, you’ll notice that I have (intentionally) omitted device-width and/or min/max-widths so that I could see if desktop browsers, responding to the media query, reacted in the same way as the mobile devices. For the initial test, I left the CSS in the HTML page itself. In a follow-up test, we will see what effects, if any, moving the code to externally linked stylesheets has on the downloads.

In order to be sure I captured every server request, I turned on logging on my MAMP server and opened a console to watch the results of what is actually being served. Making sure that all browser caches have been emptied, I requested the page using my desktop browser (Chrome) set to the standard, somewhat wide, width that I use to surf.

The browser requested the HTML page, along with the background image called for by the landscape media query and the image placed in the page. After setting a marker in the log, I then resized the browser window to a portrait aspect. This resulted in the browser only requesting the background image needed for the portrait media query.

Note: I later tested what happens if a background image is assigned in the global styles, ie without a media query, and is subsequently overridden in the appropriate media query. I found that WebKit-based browsers (Safari and Chrome) download the initially defined background image as well as the background image to be applied by the media query. Firefox and Opera ignored the overridden background image.

This had me really excited, because it would seem to indicate that devices would only download what they needed for a given situation.

Now on to some devices for testing…

The little device lab that I’ve accumulated is made up of an iPad (running iOS 4.2.1), an iPhone 3G (also running the latest OS), Samsung Galaxy Tab, Motorola Droid 2, Samsung Desire HD, Blackberry Torch and a Nexus One. After testing the page with every device, I was (happily) surprised to find the exact same behavior exhibited by the desktop browser. Each of the devices only downloaded the background image for the orientation in which they found themselves when the page was requested.

Note: This was especially difficult to test on the iPad, as it seems it is overly agressive about caching background images. I repeatedly chose the “Clear Cache” option, only to have the iPad not request the image from the server. It appears that you must clear the cache and then reboot in order to truly clear the cache.

The next test involved moving the body rules into two separate stylesheets.

<link href="css/landscape.css" rel="stylesheet" type="text/css" media="only screen and (orientation:landscape)">
<link href="css/portrait.css" rel="stylesheet" type="text/css" media="only screen and (orientation:portrait)">

Once again, only the image needed for the current orientation was requested from the server for all devices (including the desktop browser). However, all of the devices downloaded both stylesheets. Of course, this made sense because all of the devices are “capable” of both a landscape and portrait orientation.

The next logical question would be, does a device request a stylesheet if there is no possible way that it would need it? To determine this, I changed the parameters for the portrait.css file.

<link href="css/portrait.css" rel="stylesheet" type="text/css" media="only screen and (orientation:portrait) and (max-width:700px)">

You’ll notice that I specified a max-width of 700px. This way I could sure that the iPad (with a width of 768px in portrait mode) could not possibly need the stylesheet, while all of the other mobile devices in my test would need it. The result was the same as before — all of the devices, including the iPad, downloaded every single stylesheet, regardless of whether or not it could actually “use” the rules within. I played with several different values, even providing values that didn’t work for any of the devices, and yet, they all still downloaded every stylesheet.

Are you sure you want to display:none?

During my research, I also got to wondering about the use of display:none. I knew that images (or other content for that matter) would still download to the client even if it was set to display:none. This makes sense, because we often see display:none used to show/hide content in a page – and display:none just “hides” the content, it doesn’t remove it from the DOM. Well, or so I thought…

In testing, it turns out that even an image in the page, ie contained within the HTML not the CSS, is not downloaded in Firefox and Opera if its parent element is set to display:none in the applicable stylesheet. In Chrome and Safari, however, the image is still downloaded, regardless.

Basically, all of the mobile devices tested exhibit the Chrome/Safari behavior when using their WebKit-based browsers, which makes sense. On Android devices, Opera Mobile also exhibited the same behavior as its desktop counterpart.

At least now I know

If all of this leaves you scratching your head, join the club! But really, it’s quite simple. The thing to remember is that all of your stylesheets will be downloaded no matter what. Background images in rules that do not apply to a given device/situation will not download, so you don’t have to worry about eating a person’s mobile data plan up with your 12 megapixel background image! ;-) But remember that images which are in “perfectly good rules” that are overridden later in the cascade do download in WebKit-based browsers — even the mobile versions.

The other takeaway, of course, is not to rely upon display:none to hide image content from mobile devices.

And finally, remember that all of this goodness is only for standards-compliant browsers. For Internet Explorer 6/7/8, you’ll still need to do the IECC dance. I would assume this also applies to the Windows Mobile 7 browser, as it is based upon a combination of 7 and 8. Sadly, no one has sent me one of those phones to test… Anyone? Bueller?