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