What is It?
Modernizr is an open-source JavaScript library that makes it easy for web designers to support different levels of experiences, based on the capabilities of the visitor’s browser. This allows designers to take full advantage of everything in HTML5 and CSS3 that is implemented in some browsers, without sacrificing control over the user experience in other browsers. If the feature is “unsupported”, then we can deliver an appropriate script or function to imitate the feature it lacks. It runs quickly on page load to detect features and then creates a JavaScript object with the results, Finally adds classes to the html element for you to key your CSS on.
Setting-Up Modernizr:
Once you refer the Modernizr’s official webiste you can download the required files for that. Two versions will be available:
1) Development Version: This version is a fully uncompressed version
2) Production version: we can select the feature tests that is required.
Once you downloaded the file “modernizr.js”, we need to insert the file in <head> section.
<script src=”modernizr.js” type=”text/javascript”></script>
Working with Modernizr:
Now, if you do an Inspect Element on your webpage, you will see that there are many CSS classes added in the <html> tag. These classes are generated from Modernizr and will vary depending on the browser’s capabilities.
If the browser does not supports the feature, it will generate the no-featureClassName(Ex : no-cssanimations) which is mentioned below. This code is taken from Internet Explorer Browser.
Examples:
Lets take a simple demonstration using modernizr where the same code gives different output on both Chrome and Internet Explorer. I applied box-shadow property for “DEMO” division. For Chrome the applied property is working but for IE Browser, it wont support. So using the no-boxshadow class, I have applied the border to that division.
Polyfills :
Polyfills is an process of Javascript applying the standard API for old browsers. It allows you to load only the scripts that your users need. In the below Example,
url – This is the url (without any prefixes attached) that was loaded
result – This is the result of your test, treat it as a truthy value
key – If you provided a key mapping to your file, this is that key.
