Tutorials Point


  HTML-5 Tutorial
  HTML5 Tag Reference
  HTML5 Useful References
  HTML5 Tools
  HTML5 Resources
  Selected Reading

Copyright © 2014 by tutorialspoint



  Home     References     Discussion Forums     About TP  

HTML5 Modernizr Tutorial


previous next AddThis Social Bookmark Button


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 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:

FeatureCSS PropertyJavaScript Check
@font-face.fontface Modernizr.fontface
Canvas.canvas Modernizr.canvas
Canvas Text.canvastext Modernizr.canvastext
HTML5 Audio.audio Modernizr.audio
HTML5 Audio formatsNAModernizr.audio[format]
HTML5 Video.videoModernizr.video
HTML5 Video FormatsNAModernizr.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 TypesNAModernizr.inputtypes[type]
Input AttributesNAModernizr.input[attribute]
localStorage.localstorage Modernizr.localstorage
sessionStorage.sessionstorage Modernizr.sessionstorage
Web Workers.webworkersModernizr.webworkers
applicationCache.applicationcache Modernizr.applicationcache
SVG.svg Modernizr.svg
SVG Clip Paths.svgclippaths Modernizr.svgclippaths
SMIL.smil Modernizr.smil
Web SQL Database.websqldatabaseModernizr.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 APINAModernizr.addTest(str,fn)


previous next Printer Friendly

Advertisements


  

Advertisements