HTML5 Modernizr Tutorial

---

Modernizr is a small JavaScript Librarythat 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 featur.

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 */ }

To learn above concept - Do Online Practice using different browsers.

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)