Modernizr with Respond.js

Firstly, it is my understanding that when bundling Modernizr with Respond.js, no other coding or tests are required for media query support in IE8 and below. In other words, when Respond.js is bundled with Modernizr I merely have to load Modernizr in my source to get Respond.js active. Correct?

Well you need at least some CSS3 media queries to get you started. Respond.js is essentially just a JavaScript implementation of media queries for browsers that don’t support them (e.g. IE less than 8). Just make sure the reference to Respond.js comes AFTER your CSS3 media queries (link).

So, yes, assuming you have Respond.js bundled with Modernizr from a custom build or whatever, and that is loaded after your CSS3, you’re all good. Also, Modernizr needs some more configuration in the of your HTML (link)

Secondly, do you believe this is the most efficient way to achieve support for media queries in IE8 and below? In essence, I would be including a larger Modernizr script than is needed for browsers that already support media queries. Wouldn’t it be more efficient to separate the two scripts and only load Respond.js if a test for media queries fails?

Modernizr doesn’t come with support for browsers without media queries out of the box. You need to add it in a custom build. So, yes, I think it’s smart to always include respond. Minified, the library only adds a little more than 3kb, and having it included in the Modernizr file won’t add another GET request. I’d say just leave it in there to be prepared for everything.

Third, I’d go with the Modernizr method. I like using new stuff, all that extra JavaScript gets in the way.

Leave a Comment