How to detect the support of HTML 5 features on user’s browser

Basically Modernizr is an open-source JavaScript library that detects the support of native implementations of HTML5 and CSS3.

First time I saw the use of the Modernizr JavaScript library in my first MVC4 web application in the BundleConfig.cs file. I had started the MVC4 with the internet template. At that time I don’t know the real use of this library, later than I found that it can be very useful to take advantage of the advanced feature of the HTML5 and CSS3.

In MVC 4 project(Starts with Internet templete) you can find the following lines in your BundleConfig.cs

// Use the development version of Modernizr to develop 
// with and learn from. Then, when you're
// ready for production, use the build tool at
// http://modernizr.com to pick only the tests you need.
bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
        "~/Scripts/modernizr-*"));

You can also use this library in the non MVC 4 projects, just download and add in your project.

With the help of Modernizr, you can write the code to your application to automatically use HTML 5 controls if the user’s browser supports them otherwise use the other alternate controls.

For the example see the following example:

if (!Modernizr.inputtypes.date) {
    $(function () {
        $(".datefield").datepicker();
    });
}

From the above the first line of script uses Modernizr to verify that HTML 5 date input is supported or not. If it’s not supported, the jQuery UI date picker will be use.

Same as you can also verify the following features:

applicationCache

if (!Modernizr.applicationcache) {
// Not supported
// Write your logic
}

Canvas

if (!Modernizr.canvas) {
// Not supported
// Write your logic
}


Canvas Text

if (!Modernizr.canvastext) {
// Not supported
// Write your logic
}


Drag and Drop

if (!Modernizr.draganddrop) {
// Not supported
// Write your logic
}


hashchange Event

if (!Modernizr.hashchange) {
// Not supported
// Write your logic
}


History Management

if (!Modernizr.history) {
// Not supported
// Write your logic
}

HTML5 Audio

if (!Modernizr.audio) {
// Not supported
// Write your logic
}


Read More on HTML5’s Features detected by Modernizr