HTML and CSS Reference
In-Depth Information
Modernizr.load({
// first tests
test: function () {
return !!window.JSON;
},
nope: 'json2.js'
}, {
// second tests
test: Modernizr.sessionStorage,
nope: 'sessionStorage.js'
},
// now once we're all good to go, include app.js
'app.js'
});
Make sure you're using a version of Modernizr that you built your-
self. This is easy if you just go to the Modernizr website: select
the pink Production button and build yourself. From here you can
select the features you want to test for. The advantage is that
your visitor downloads less code when visiting your website.
Yo u i n c l u d e t h e M o d e r n i z r J a v a S c r i p t i l e , a n d t h e n t h e c o d e
above, which simply tells Modernizr to run two tests before
including the app.js file (which would include all your applica-
tion code). Although we're calling Modernizr, all the testing and
conditional loading is happening in the magic yepnope library.
Yo u d o n ' t h a v e t o w o r r y a b o u t t h a t ; j u s t f o c u s o n s p e c i f y i n g t h e
feature tests required before your code gets run.
The first test is checking that JSON is available natively. This isn't
part of HTML5, but hey, we included geolocation in this topic, and
that's not part of HTML5 either! The point is that you polyfill any
technology if you want to level the playing field. If the test fails—
say the browser is IE7, which doesn't have JSON natively avail-
able—our code will go ahead and load the json2.js file.
Next, we test for
sessionStorage
support. Since we chose to
build this version of Modernizr to test for
sessionStorage
, this
value will be available as either true or false depending on sup-
port. If false, the sessionStorage.js polyfill is loaded (note that
from our example above, it will read the sessionStorage.js file
from the relative path on your domain).
