In order to perform feature detection with Modernizr, you need to add the Modernizr. js file to your project. This can be done in 2 ways –
Modernizr official website
Modernizr Development-Build download page
2. Using npm and command line: Modernizr can also be installed Node Packet Manager or NPM. You can install NPM here. After installing npm, open command line and enter : npm install -g modernizr
- Now include the downloaded Modernizr file in the section of your page.
- Add “no-js” class to the <html> tag.
<!DOCTYPE html> <html class="no-js"> <head> <script src="modernizr-custom.js"></script> </head>
- Modernizr adds several CSS classes on the root <html> element. These classes are added based on browser’s capabilities (feature/no-feature) – classes are added for features that are supported and classes are added with a “no-“ prefix for features that aren’t supported.
For example, if Flexbox is supported by the browser, “flexbox” class will be added to the <html> tag. If it isn’t supported, “no-flexbox” class is added instead.
Classes added to <html> tag by Modernizr for feature detection tests in IE9
<html class="js no-flexbox canvas canvastext no-webgl no-touch geolocation postmessage no-websqldatabase no-indexeddb hashchange no-history draganddrop no-websockets rgba hsla multiplebgs backgroundsize no-borderimage borderradius boxshadow no-textshadow opacity no-cssanimations no-csscolumns no-cssgradients no-cssreflections csstransforms no-csstransforms3d no-csstransitions fontface generatedcontent video audio localstorage sessionstorage no-webworkers no-applicationcache svg inlinesvg smil svgclippaths">
Original Source: Cross Browser Feature Detection With Modernizr