Cutting the Mustard with CSS Media Queries
In the past we’ve used a javascript check to define the types of things we might load onto a page. The idea is that certain modern browsers support new things, and if those new things are supported you could reasonably expect the browser was new enough to do all the fancy stuff you wanted… so you would load that in. If the browser didn’t support it then you would just supply the standard content. This is a really interesting hack, but I think removing CSS altogether isn’t the answer, and building your layouts in the right way from the outset is still the best approach. What do I know though, sites like Nature.org/com are using this.
Ok, so if you’re using CSS to detect browser support, there’s a good chance you’ll want to load or run some or all of your scripts only in browsers that you’re supporting. So how do we do that?
Well, there are several ways this can be achieved, but the simplest one I’ve found works like this:
An excerpt from Cutting the Mustard with CSS Media Queries
