What is It?
html element for you to key your CSS on.
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.
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.
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.
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.
Getting started with Modernizr
1 min read