Modernizr

Introduction

Modernizr is a small JavaScript library for detecting browser capabilities.

• creates an object Modernizer with boolean properties about available features
• provides a script loader for pulling scripts to backfill functionality (polyfills)

Keep in mind that polyfills sometimes decrease user expirience because of poor performance.

Modernizr Download is usually customized and contains only specific checks.

It's a best practice to include the Modernizr script before the end of a head tag to avoid browser (IE) compatibility issues.

Modernizr.load function

Loads a script asynchronously based on a test result, it's not a default Modernizr feature and has to be checked for in the download. Load function usage example:

   Modernizr.load({
    test: Modernizr.geolocation,
    yep : 'geo.js',
    nope: 'geo-polyfill.js'
   });

Usually Modernizr loads more than one script, an has more than one test.

   Modernizr.load([
    {
     // run a test, include script when capability missing
     test : Modernizr.fontface && Modernizr.canvas && Modernizr.cssgradients,
     nope : ['presentational-polyfill.js', 'presentational.css']
    },
    {
        test : Modernizr.websockets && window.JSON,
        nope : 'functional-polyfills.js',
        // scripts under both are always loaded
        both : [ 'app.js', 'extra.js' ],
     complete : function () {
         // this function runs when all of the previous scripts are loaded
         // and when all scripts from this secion are loaded.
         myApp.init();
        }
    },
    // this script is included without checking any conditions
    'post-analytics.js'
   ]);

CSS for the unsupported features

CSS markup can be adapted to the availability of features. For instance, if css gradients are not supported, perhaps we want to include background image instead. But be careful, browser usually preloads images, so this could cause unwanted http requests. Note that the missing class has a no-missing_feature name:

   .no-cssgradients {
    background: url("images/glossybutton.png");
   }

Detecting css prefixes from javascript

When using css animations and transitions in javascript, it's useful to know how the browser prefixes certain css features.

   Modernizr.prefixed('boxSizing')

http://modernizr.com/docs/


@msvaljek