Modernizr with Respond.js

Question

I am carefully assessing the best way to utilize Modernizr and Respond.js for responsive design and have a couple of questions for the community.

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?

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?

Third, if I would like to separate the two scripts, what do you believe is the best way to load Respond.js if needed? One option would be to use an IE specific conditional comment to load Respond. Another option is to use yepnope and Modernizr to test for media query support and load Respond if needed. Which would be more efficient and fault-proof.

Lastly, if I choose to separate the two scripts and use Modernizr to load Respond if needed I have encountered the two following techniques:

<script>         yepnope({     test : Modernizr.mq('(only all)'),     nope : ['js/libs/respond.min.js'] }); </script> 

OR

<script>Modernizr.mq('(min-width:0)') || document.write('<script src="js/libs/respond.min.js"><\/script>')</script> 

I have found that the second crashes IE8, but must just need rewriting. Which technique would you recommend?

Thanks for all the help.

Answer 1

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.