As I previously mentioned, Modernizr used to be bundled with Respond.js, however recently as of version 2.5 it was decoupled from the library itself and must now be downloaded separately and then added manually. This was due to some IE 8 crashing issues.
Because it has been removed, I won't go into a lot of detail about it beyond implementing and lightly reviewing the example from the Respond JS download website and showing how to load it as a polyfill with Modernizr.load.
On the Respond JS Github page, this bit of JavaScript describes itself as follows:
A fast & lightweight polyfill for min/max-width CSS3 Media Queries (for IE 6-8, and more).
This means if you wanted media queries regarding this scope to be backward compatible you could leverage this tiny library to accomplish that. One such use could, for example, be if your web page was built to have a responsive layout that adapted to the width and height of the viewable area.
Here is another brief example of using a test to load in a polyfill; in this example, no test is performed and the script is explicitly loaded in for shim support:
Modernizr.load({
load: Modernizr.hasmediaq,
complete: function(){
console.log('respond.js has been loaded'),
}
});Of course you may prefer to conditionally load this polyfill; we can create and apply a new custom test using Modernizr.mq and instead polyfill with the script only as needed as seen in the following code snippet:
Modernizr.addTest( 'hasmediaq', Modernizr.mq('only all') );
Modernizr.load({
test: Modernizr.hasmediaq,
nope: 'respond.js',
complete: function(){
console.log('respond.js has been loaded'),
}
});Now that we have a media query functionality successfully polyfilled, let's put it to use. As I mentioned before, I'm going to borrow a page from the example available on the Respond JS test page but with a little bit of a twist.
In this next step, I'll be adding the following CSS, pasted from the example on the Respond JS website, and then adapted to our example code we've already been using. In the Respond JS test case, the background color of the page changes color as different media queries are met. The example we'll use will cause the background color of just the localStorage div to change color as the size of the page changes. As each new condition is met, the applicable style will be applied to the element.
Add the following CSS to the styles.css page:
/*
* Respond.js test page styles applied to our
* custom example. Resizing the page will
* change the color of the #localStorage div
* Based on http://scottjehl.github.com/Respond/test/test.html
*/
/*styles for 300 and up @ 16px!*/
/* The max-width declaration below blocks this from ever working */
@media only screen and (min-width: 18.75em){
#localStorage {
background: yellow;
}
}
/*styles for 480px - 620px @ 16px!*/
@media only screen and (min-width: 30em) and (max-width: 38.75em) {
#localStorage {
background: green;
}
}
@media screen and (min-width: 38.75em),only print,projector{#localStorage {background:red;}}
/*styles for 800px and up @ 16px!*/
@media screen and (min-width: 50em){
#localStorage {
background: blue;
}
}
/*styles for 1100px and up @ 16px!*/
@media screen and (min-width: 68.75em){
#localStorage {
background: orange;
}
}
/*styles for 1200px and up @ 16px!*/
@media screen and (min-width: 1200px){
#localStorage {
background: navy;
}
}Now when we resize the page you'll notice the background color changing on the localStorage wrapper, as seen in the following screenshot:
Putting it all together here is the final code including tests, HTML, CSS, and JavaScript loading with jQuery.
JavaScript executing on DOM ready via jQuery in script.js file uses the following code snippet:
$(function(){
//Test for localstorage and load a polyfill if needed.
Modernizr.load({
test: window.localStorage,
nope: 'storage.js', //load localstorage polyfill
complete: function () {
localStorage.setItem("successfull save", "Saving to local storage now that it's safe");
}
});
//Create a test for media queries. Then load respondjs polyfill if needed.
Modernizr.addTest( 'hasmediaq', Modernizr.mq('only all') );
Modernizr.load({
test: Modernizr.hasmediaq,
nope: 'respond.js',
complete: function(){
console.log('respond.js has been loaded'),
}
});
Modernizr.addTest( 'standalone', window.navigator.standalone );
Modernizr.load({
test: Modernizr.standalone,
yep: 'specialjavascriptfunctions.js',
complete: function () {
console.log("Standalone was tested for and the conditional script was loaded if needed");
}
});
//Cache the text input, and local storage into variables.
var textVal = $('.textinput', '#localStorage'),
var storedItem = localStorage.getItem("textvalue");
//Check and see if anything has been stored
//from the text input. Set the text input to have its value.
if( typeof storedItem === 'string' ){
textVal.val( storedItem );
}
//Bind a function to the click event of
//our button that saves the value into localstorage.
//An alert is fired after this is done.
$('button', '#localStorage').click(function(){
localStorage.setItem( "textvalue", textVal.val() );
alert("Saved into local storage!");
});
});CSS styles including the color changing media queries for our styles.css file are used in the following code snippet:
/* Wrapper for the text input and button. */
#localStorage{
margin: 300px auto 0;
width: 265px;
background: #eee;
padding: 20px;
}
/* Add a drop shadow */
.boxshadow #localStorage {
-webkit-box-shadow: 0 0 2px 2px #ccc;
box-shadow: 0 0 2px 2px #ccc;
}
/*
* Respond.js test page styles applied to our
* custom example. Resizing the page will
* change the color of the #localStorage div
* Based on http://scottjehl.github.com/Respond/test/test.html
*/
/*styles for 300 and up @ 16px!*/
/* The max-width declaration below blocks this from ever working */
@media only screen and (min-width: 18.75em){
#localStorage {
background: yellow;
}
}
/*styles for 480px - 620px @ 16px!*/
@media only screen and (min-width: 30em) and (max-width: 38.75em) {
#localStorage {
background: green;
}
}
@media screen and (min-width: 38.75em),only print,projector{#localStorage {background:red;}}
/*styles for 800px and up @ 16px!*/
@media screen and (min-width: 50em){
#localStorage {
background: blue;
}
}
/*styles for 1100px and up @ 16px!*/
@media screen and (min-width: 68.75em){
#localStorage {
background: orange;
}
}
/*styles for 1200px and up @ 16px!*/
@media screen and (min-width: 1200px){
#localStorage {
background: navy;
}
}And last but not least, the simple HTML page for inputting and saving a text string into localStorage is shown in the following code snippet:
<!doctype html> <!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ --> <!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]--> <!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]--> <!--[if IE 8]> <html class="no-js lt-ie9" lang="en"> <![endif]--> <!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]--> <head> <meta charset="utf-8"> <!-- Force IE to use the latest version of its rendering engine --> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title></title> <meta name="description" content="A Modernizr test page."> <link rel="stylesheet" href="styles.css"> <!-- Modernizr will be included in the head of the page. We'll need it do do some light lifting before the DOM tree renders load feature detection and shimming --> <script src="modernizr.custom.js"></script> </head> <body> <!-- Creates a very simple form for storing a text string into localstorage --> <div id="localStorage"> <input type="text" class="textinput"/><button>Save to Local Storage</button> </div> <!-- JavaScript at the bottom for fast page loading --> <!-- Grab Google CDN's jQuery, with a protocol relative URL; fall back to local if offline --> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script src="script.js"></script> </body> </html>
Just like that we've conditionally shimmed for and applied a series of media queries with CSS and Respond JS. We've polyfilled and saved something into localStorage with Modernizr.load. Finally, we trimmed the fat on our library by way of a custom build to get the most amount of kick with the smallest overhead.