When I first started working on a web app project I had never worked with CSS “Media Queries” before. One of the blog posts I found online about how they work was this one:
The author argues that CSS Media Queries are “Fool’s Gold” because they don’t really deliver the optimizations for mobile that they promised. In particular that even if an image was set to “display:none” or if you hid an element with a background image the image file would still get downloaded. It was that last part that concerned me.
3. For decorative images, or ones that really don’t add material to the content (for example a portrait photo of the author or subject of the article, which is nice to have but isn’t content in the same way as an exploded diagram or chart would be), I set those as background images with CSS. I then swap out those backgrounds for different screen sizes with Media Queries.
My web app is supposed to be usable by everything from a phone screen (320×480) up to large desktop screens (1600+ pixels wide). After reading the aforementioned blog about unnecessary images still getting downloaded I was concerned that phone users would also still be downloading the gigantic, high-res images intended for desktop viewers with HD monitors. So I opened up both the iOS simulator and the Android Emulator and pointed them to my web app on my Dev Server. Then I took a look at the server access log to see what files they were requesting.
To make things more interesting I added a purposely gigantic image file to my largest screen target media query with a funny name I could easily pick out of the log file. Then I accessed my app again with both emulators and noted that neither of them – whether emulating phones or tablets – ever requested the giant file. I also checked it in Chrome and Safari on the desktop and at smaller widths it still didn’t request the giant file. Expand the browser to full screen width of 1920 pixels and the giant file was requested from the server.
In other words the CSS media queries are working EXACTLY the way they are supposed to. It’s only requesting the background images for the current screen size.
I should also note that I was testing this in RECENT browsers. Chrome 13, Safari 5, iOS 4.3, Android Gingerbread 2.3.3, so perhaps the issue with unnecessary images being downloaded was a bug that got fixed, I don’t know. What I can say is that, as of today, my method seems to work correctly. 🙂