LambdaTest Community

Find answers, support, and inspiration from other users

Questions
LambdaTest Community
Answered

How can I set up Modernizr for feature detection?

Recently i have been confused about how can I set up Modernizr for feature detection, can anyone please guide me onto it.

Up Vote Down Vote 0 Votes
Posted 4 months ago

Answers


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 –

1. Download from website: Visit the official website to build and download the JavaScript file. Click on “Add your detects” to handpick the features that you want according to your project’s needs or click on “development build” to be redirected to the build page with all the tests/detects options pre-selected. Click on the build button to download the file.

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

  1. Now include the downloaded Modernizr file in the section of your page.

<script src="modernizr-custom.js"></script>

  1. Add “no-js” class to the <html> tag.
<!DOCTYPE html>
<html class="no-js">
<head>
<script src="modernizr-custom.js"></script>
</head>
This “no-js” class is a necessary fallback if the user has disabled JavaScript in their browser or the browser itself does not support javascript. Once the page is loaded and in case the browser supports javascript, “no-js” class will be replaced by “js” class automatically by the Modernizr for feature detection.
  1. 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

Up Vote Down Vote 0 Votes
Posted 3 months ago