Media queries and JavaScript

Mobile development and responsive design are everywhere these days. You can barely attend a web conference without someone mentioning them before the first coffee break.

The weapon of choice is the media query, a CSS3 extension of the old media types we’ve been dragging around since HTML4 and CSS2. It’s a simple enough idea: ask the browser a few questions about the device and serve up styles appropriate to the answer. Civilized, elegant and suspiciously sensible. Of course, nothing involving browsers is ever quite that simple.

There are resolutions, orientations, screen sizes and an increasingly exotic collection of devices to consider. Andy Clarke has written about some of the possibilities in Hardboiled CSS3 Media Queries. And then there’s Internet Explorer 8 and its elderly relatives, which don’t support media queries at all, but some tragedies you simply learn to live with.

Media queries are excellent for changing the presentation of a page, but presentation is only part of the problem. Hiding something with CSS doesn’t necessarily mean the browser politely decides not to download it. The poor mobile device may still be hauling scripts, images and other assorted luggage across the network only to discover that none of it will ever be shown.

JavaScript is particularly worth watching. External libraries can be substantial, although minification and Gzip compression help a lot. jQuery, for example, becomes dramatically smaller once it has been squeezed, crushed and generally treated with the hostility its file size deserves.

Scripts may also trigger downloads of images and other resources that make perfect sense on a desktop connection but considerably less sense on a mobile device struggling with an indifferent network. What we really need is something resembling media queries for JavaScript and other resources: a clean way of saying, this device doesn’t need that, so don’t bloody download it.

Of course there are workarounds. Peter-Paul Koch describes one approach in Combining media queries and JavaScript, and clever developers will undoubtedly invent plenty more. But workarounds are what web developers create while waiting for browsers and standards to catch up with reality. Hopefully they will. Eventually.