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.

Solution 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.

Solution 2

The new version of Respond includes some feature testing so you don't need Modernizr or Yepnope!

Here's the revision: https://github.com/scottjehl/Respond/commit/4d60f45716b8395e6f24238f9dc5e34c857e87f2

included the window.matchMedia polyfill externally from the main respond.js function. The source code for this polyfill is here https://github.com/paulirish/matchMedia.js, and including it out-of-the-box will make things easier to keep updated, and allow for smaller file compression for those already including it via Modernizr or otherwise (if you are, you can delete it from Respond.js).

Also, you should note that using yepnope.js could cause a delay in which you see the non-media query styles before the media query styles are parsed and applied. The recommendation is that you put respond.js in the header to avoid this as much as possible, although, it's also good to keep your js files in the footer so up to you.

Solution 3

Feature testing might be in newer lib like tkane2000 says ... Just wanted to mention you could probably do this via Modernizr too:

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

Original Poster has i think invalid media query check '(only all)' ... Shouldnt be any parenthesis based on some things I read. Once I removed the parens, respond.js seems to be included appropriately.

Comments

[Solomon Duskis]

Nice questions there! Re:1, I would recommend phrasing a question in a way that explains why it's not just you being lazy to check... Re:2 note that "only load Respond.js if a test for media queries fails?" means that the browsers, that don't support the MQ, will pay an extra roundtrip (for the respond.js script); while it does save you 1kb (minified+gzipped respond.js) per visitor for supporting browsers. It's a tradeoff.

[Andrew]

Note, Modernizr no longer bundles Respond.js due to performance reasons. See this comment github.com/Modernizr/Modernizr/issues/467#issuecomment-34689‌​68.