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.
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.
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.
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?
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.
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?
IE for Windows Phone currently requires Conditional Comments, but the next version will support both IECC and Media Queries.
Conditional Comments are actually a pretty good solution since they are evaluated BEFORE the style sheet gets downloaded. You can also use them to conditionally include content like script tags and other parts of the page, not just style sheets.
I’ll see what I can do about the phone. It’s not, you know, like you’re the 18 millionth person to ask or anything.
Great post, I really need to learn more about mobile device compatability and how it effects good web design and development.
Great article, but still quite limited due to it’s focus in mobile browsers used in the US. You forget Symbian phones completely. Yes, I know, the current browser in Symbian is really old and not on par with iOS and Android browsers, and many Symbians use Opera Mini or Opera Mobile.
But still Symbian phones are no.1 worldwide. http://en.wikipedia.org/wiki/Smartphone and it would have been nice to see the results in Symbian’s OSS browser too. Web developers like me here in Europe are eagerly waiting for Nokia’s new mobile browser which should be released in Q1 2011.
Seasons greetings from the land of the Santa Claus.
I would love to test some Symbian devices, but sadly, I don’t happen to have any. I would, however, expect that the results would be similar, ie, that they too would download all the stylesheets, but not necessarily the actual images. If I can get my hands on a Symbian device to test, I will definitely update the post.
Awesome post, you delivered exactly what I was looking for. I was quite surprised that the devices downloaded all the different stylesheets no matter what @media parameters you set.