Overview
With HTML5 and CSS3 many new features have been added and today there are many browsers. Not every browser supports all the features of HTML5 and CSS3, so when writing JavaScript and other scripting it's a very tedious task to check whether or not the browser supports each feature.
Modernizr is an open source JavaScript library that helps to detect features of HTML5 and CSS3 supported.
The good thing about the Modernizr JS is that we can download this depending on the need, in other words if an application needs to check for only a few features of HTML5 and CSS3 then select those features and download the file. That JavaScript file will contains only the source code for the selected features.
How to use Modernizr JS
On every page you need to add the following tag:
Add the Modernize.js like we add any JavaScript file as in the following:
In the following source code if the HTML5 Canvas tag is supported then the following picture will draw on the canvas object else the same kind of picture will show using the image tag.
The following picture is created with the canvas object.
When I am running the same code in browsers that do not support the canvas element then it will show the image. The message above the image is displayed to show the difference.
I hope now you have some basic understating of Modernizer JS.
Thanks for reading.