How did I never know about this before? Respond.js is “a fast & lightweight polyfill for min/max-width CSS3 Media Queries (for IE 6-8, and more).”

In other words, it makes HTML5Boilerplate even better by eliminating the need to craft a separate, IE8-and-below stylesheet when you don’t want those browsers to see the mobile-first version of your site. Better yet, it works with Modernizr (also part of HTML5Boilerplate) by utilizing its media-query detection code.

I just add it at the bottom of my modernizr.js file (a mere 3K of extra data) so that it starts to run before the DOM is even loaded. Sadly, it uses AJAX to get the CSS file, so there’s still a flash of mobile-first styling. But the convenience is well worth it.

Leave a Reply

Your email address will not be published. Required fields are marked *