What is Modernizr

Modernizr is a small piece of JavaScript code library for feature detection that detects the browser support next-generation web technologies in your user’s browsers. Modernizr uses feature detection to allow you to easily fit your website on user’s experiences based with the actual capabilities of their browser.

There are several JavaScript libraries are available now a days, which can help you detect features and browsers. Using these libraries we can detect whether the browser has support for that particular feature or not.

Modernizr gives the ability to detect the new features in the browsers that can render or utilize

Let’s take a example with plain javascript to detect canvas feature.

<script>

  $(document).ready(function(){
    var canvasElement = "";
    canvasElement = document.createElement('canvas');
    if(canvasElement = = = undefined){
      $("#draw").html("Canvas is not supported, use something else.");
  }else{
    //  canvas is supported by the browser.

    $("#draw").html("Canvas is supported");
    $("body").append(canvasElement);
    }
  });
</script>

In this code, we tried to create a canvas element and then added it to body.

we could use the Modernizr.canvas property to test if the browser supported canvas or not:

<script>

  $(document).ready(function(){
    var canvasElement = "";
    canvasElement = document.createElement('canvas');
    if(Modernizr.canvas){
    $("#draw").html("Canvas is supported");
    $("body").append(canvasElement);
  }else{
    //  canvas is supported by the browser.

    $("#draw").html("Canvas is not supported, use something else.");
    }
  });
</script>

Modernizr creates an object named Modernizr to the document, which contains all of the test results as Boolean properties. We can write a simple script to list all supported and unsupported features:

$(document).ready(function(){
    for(var key in Modernizr) {
        if(typeof Modernizr[key] == 'boolean'){
            console.log(key + "::" + Modernizr[key] );
            if(Modernizr[key]){
                $("#supported- 
                features").append("<b>"+key+"</b><br/>");
            }else{
                $("#unsupported- 
                features").append("<b>"+key+"</b><br/>");
            }
        }
    }
});

Polyfilling with YepNope,requireJS

As a Developer, we can load the JS as per the feature is supported by your browsers. We can use Modernizr.load() method to test if a certain feature is supported or not and load the appropriate JavaScript based on the result. Unfortunately Modernizr.load() is not provided in the modernizr.js file by default and was a part of Modernizr Version 2.8.3. But there are many other third party libraries are available to load resources like YepNope,requireJS,HeadJS etc.

Modernizr.load() is actually yepnope.js (http://yepnopejs.com/). yepnope.js was known as a conditional loader for polyfills, but now its deprecated after version 1.5.

Let’s take a example for this:

<script>
    Modernizr.load({
    test: Modernizr.touch,
    yep : 'js/touch.js',
    nope: 'js/no-touch.js'
    });
</script>

In below code we are checking if touch is available in the browser then it will load touch.js, otherwise it will load the no-touch.js file into the browser.

For the newer versions of Modernizr, we can include yepnope.js to use Modernizr.load().

Developers can also wrote the previous example of code as below with RequireJS:

<script>
if(Modernizr.touch){
    require(['js/touch'], function() {
    //code to execute when touch..js is loaded
       });
}else{
    require(['js/no-touch'], function() {
    //code to execute when our polyfill is loaded
       });
}
</script>