modernizr for ie8 media query support

Question

I am looking at using modernizr for supporting media query in ie8. Could you please provide an example to implement the same.

I also had a look at Respond.js, but found it a bit complex with all the CDN stuff.

Any other suggestions would also be appreciated.

Answer 1

Respond.js is mandatory if you want to use mediaqueries in IE8. This is the polyfill that enables media queries for the browser.

Modernizr only offer test for mediaqueries. According to the doc, in older non-supporting browser the test will always return false.

Another alternative is adapt.js by Nathan Smith creator of the 960gs grid system.

Update: Modernizr is now adding support for html5 tags in older version of IE as stated in the doc

Answer 2

Modernizr does not add functionality to the browser; it merely detects whether the browser supports certain functionality, and therefore allows your site to determine whether it needs to use a polyfill hack for that feature.

Therefore you would use Modernizr to find out whether you need to use Respond.js or not.

The Modernizr web site does include a page which lists all the polyfill hacks that they know of, so if you're not happy with Respond.js, you could try looking here to see what alternatives are available. Looking at the page, I see there are a few others listed in the "Media Queries" section, so you could try them.

However, I will say that Respond.js does seem to be the one script which is currently recommended for this kind of thing. I haven't tried the others listed, so I can't compare them, but I can say that Respond.js works the way it does for a good reason.

The reason that Respond.js has these complex cross-domain issues is that the only way for it to work with browsers that don't understand media queries is to load the whole stylesheet again and process it using Javascript. But the browser's security model doesn't like you doing that sort of thing with remotely loaded scripts.

As I say, I haven't worked with any of the alternative scripts, but my guess is that they'd suffer from similar issues, due to the way they'd need to work in order to get media queries working on a browser that doesn't support them.

The easiest way to deal with this is simply to put the respond.js script into the same domain as the rest of your site rather than loading it from a separate domain. This completely bypasses any need to deal with the CDN issue at all.

Hope that helps.