HTML5 - Modernizr


Advertisements


Modernizr is a small JavaScript Library that detects the availability of native implementations for next-generation web technologies

There are several new features which are being introduced through HTML5 and CSS3 but same time many browsers do not support these news features.

Modernizr provides an easy way to detect any new feature so that you can take corresponding action. For example, if a browser does not support video feature then you would like to display a simple page.

You can create CSS rules based on the feature availability and these rules would apply automatically on the webpage if browser does not support a new feature.

You can download latest version of this utility from Modernizr Download.

Syntax

Before you start using Modernizr, you would have to include its javascript library in your HTML page header as follows −

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

As mentioned above, you can create CSS rules based on the feature availability and these rules would apply automatically on the webpage if browser does not support a new featur.

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

/* In your CSS: */
.no-audio #music {
   display: none; /* Don't 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 is the syntax 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 −

Feature CSS Property JavaScript Check
@font-face .fontface Modernizr.fontface
Canvas .canvas Modernizr.canvas
Canvas Text .canvastext Modernizr.canvastext
HTML5 Audio .audio Modernizr.audio
HTML5 Audio formats NA Modernizr.audio[format]
HTML5 Video .video Modernizr.video
HTML5 Video Formats NA Modernizr.video[format]
rgba() .rgba Modernizr.rgba
hsla() .hsla Modernizr.hsla
border-image .borderimage Modernizr.borderimage
border-radius .borderradius Modernizr.borderradius
box-shadow .boxshadow Modernizr.boxshadow
Multiple backgrounds .multiplebgs Modernizr.multiplebgs
opacity .opacity Modernizr.opacity
CSS Animations .cssanimations Modernizr.cssanimations
CSS Columns .csscolumns Modernizr.csscolumns
CSS Gradients .cssgradients Modernizr.cssgradients
CSS Reflections .cssreflections Modernizr.cssreflections
CSS 2D Transforms .csstransforms Modernizr.csstransforms
CSS 3D Transforms .csstransforms3d Modernizr.csstransforms3d
CSS Transitions .csstransitions Modernizr.csstransitions
Geolocation API .geolocation Modernizr.geolocation
Input Types NA Modernizr.inputtypes[type]
Input Attributes NA Modernizr.input[attribute]
localStorage .localstorage Modernizr.localstorage
sessionStorage .sessionstorage Modernizr.sessionstorage
Web Workers .webworkers Modernizr.webworkers
applicationCache .applicationcache Modernizr.applicationcache
SVG .svg Modernizr.svg
SVG Clip Paths .svgclippaths Modernizr.svgclippaths
SMIL .smil Modernizr.smil
Web SQL Database .websqldatabase Modernizr.websqldatabase
IndexedDB .indexeddb Modernizr.indexeddb
Web Sockets .websockets Modernizr.websockets
Hashchange Event .hashchange Modernizr.hashchange
History Management .historymanagement Modernizr.historymanagement
Drag and Drop .draganddrop Modernizr.draganddrop
Cross-window Messaging .crosswindowmessaging Modernizr.crosswindowmessaging
addTest() Plugin API NA Modernizr.addTest(str,fn)