CHAPTER 5 Robust, Responsible, Responsive Web Design
feature testing framework; and Respond.js if we’ve chosen to give IE8
the enhanced experience. These scripts are loaded in the head of the
page, since they’re either time sensitive (Respond.js) or things we need
to be ready right away in case we reference them in our other scripts
(Modernizr).(function(win, undefined) {
var mqSupport = "matchMedia" in win && win.matchMedia( "only all" ).matches;
if( !mqSupport && !respond.mediaQueriesSupported ) {
return;
}
})( this );This script checks whether the user’s browser supports the matchMedia
method (JavaScript’s native method of parsing media queries) and then,
just for good measure, it ensures that the same only all test that we’re
using in our CSS passes. If the native method doesn’t exist, it checks
against Respond.js’s shimmed media query support. If you’re targeting a
specific minimum version of IE for the enhanced experience, this Respond.
js test could be swapped out in favor of checking for the existence of an IE
conditional class.(function(win, undefined){
/* This script assumes a conditional comment scheme along the
lines of the following:
<!--[if (lt IE 8) ]> <html class="old-ie"> <![endif]-->
<!--[if (IE 8) ]> <html class="ie8"> <![endif]-->
<!--[if (gt IE 8)|!(IE)]><!--> <html> <!--<![endif]-->
*/
var mqSupport = "matchMedia" in win && win.matchMedia( "only all" ).matches,
htmlClass = document.getElementsByTagName( "html" )[ 0
].getAttribute( "class" ),
ie8 = htmlClass && htmlClass.indexOf( "ie8" ) > -1;
if( !enhanced && !ie8 ){
return;
}
})( this );