Extending media queries with JavaScript

Media queries are cool: you can decide what CSS file to serve to a browser based its width. But although it works perfect in many modern browsers, there are always some browsers or some versions of it lagging. Let’s give them a hand.

What are media queries

To explain what media queries are, it’s best to start with the standard media types. Media types were introduced as part of the CSS2 specification way back in 1998 and is supported by all major browsers. The most common are “screen” (desktop PC’s), “handheld” (mobile devices), and “print”.
This looks pretty straightforward and it is. But most mobile browsers don’t consider themselves “handheld” when choosing a CSS file. Devices like iPhone, Android and Nokia behave like a desktop computer and select the CSS that’s reserved for the “screen”-devices.
This was in some way a logical step, since most websites don’t have a CSS file for handheld devices. The drawback is also very clear: You cannot cram a web page optimized for desktop monitors in a 2′ handheld monitor without paying a price. Usability suffers. Users are given crutches like the ability to zoom in to a specific part of the page, but that’s like watching TV through a keyhole.
To address this problem the W3C came with media queries.
Now we have all our ducks back in a row. If the browser width is larger than 480 pixels, it will select “screen.css”. If the width is smaller or equal to 480 pixels, it will go for “handheld.css”. We keep our CSS link with media="handheld" as a fallback for handheld devices that don’t do media queries, most notably IE Mobile and Blackberry’s browser. Checkout PPK’s compatibility table to see which browser does not support Media Queries yet.

Filling the gaps

But this still is not enough to have your site render well in all browsers. IE and many older browsers do not handle the new media queries.
Some sort of solution was proposed on ALA, but that technique requires an extra CSS file called antiscreen.css that cancels some of all styles that were created in the screen.css. Most of the websites I make just have too much CSS styling to make that technique usable.
JavaScript can also detect the screen width, so I decided to use it to help browsers in choosing the right CSS. The script I created also checks the screen width after a window resize, just like Media Queries. Just open the demo and you will see that the page will switch to the mobile stylesheet if the window gets too narrow. Even in browsers that don’t support Media Queries (yes, I’m looking at you, IE!).

How it works

In the demo the script expects that if Media Queries are supported by the browser, a div with the class cssLoadCheck should be 100 pixels in width. To check that it this is true it will insert a div with that class into the DOM, check its width and then removes it from the DOM again. If the width of that test div isn’t 100 pixels we know that Media Queries are not supported and that JavaScript has to supply a CSS file depending on its width.
Each time the pages refreshes it removes the dynamically added link-tags in the head and adds new ones.

http://www.thebrightlines.com/2010/09/11/helping-browsers-with-media-queries/