Modernizr is a small JavaScript Library that detects whether a particular feature of web technologies is available or not in the user’s browser. It provides an easy way to detect any new feature so that we can take corresponding action based on the browser’s capabilities. For example, if a browser does not support a video feature then we can display a simple message regarding the same. We can also create CSS rules based on the feature availability and these rules would be applied automatically on the webpage if the browser does not support a new feature.

Before we start using Modernizr, we are required to include its javascript library in our HTML page header as follows −

<script src="modernizr.min.js" type="text/javascript"></script>

Instance

Following is the simple syntax to handle supported and non supported features −

<!-- In your CSS: -->
.no-audio #music {
   display: none; <!-- to not show Audio options -->
}
.audio #music button {
  <!-- Style the Play and Pause buttons nicely -->
}

<!-- In your HTML: -->
<div id="music">
   <audio>
      <source src="audio.ogg" />
      <source src="audio.mp3" />
   </audio>
   
   <button id="play">Play</button>
   <button id="pause">Pause</button>
</div>

Here it is notable that you need to prefix “no-” to every feature/property you want to handle for the browser which does not support them.

Following code snippet can be added to detect a particular feature through Javascript −

if (Modernizr.audio) {
   <!-- properties for browsers that
   support audio -->
}

else{
   <!-- properties for browsers that
   does not support audio -->
}

Features detected by Modernizr

Following is the list of features which can be detected by Modernizr −