amitabhaghosh197
7/1/2015 - 4:25 PM

mordernizr with javascript

mordernizr with javascript

gistfile1.txt
content_copyfile_download
<html class=" js flexbox canvas canvastext webgl no-touch
geolocation postmessage no-websqldatabase indexeddb hashchange
history draganddrop no-websockets rgba hsla multiplebgs
backgroundsize borderimage borderradius boxshadow textshadow opacity
no-cssanimations csscolumns cssgradients no-cssreflections
csstransforms no-csstransforms3d csstransitions fontface video audio
localstorage no-sessionstorage webworkers applicationcache svg
inlinesvg smil svgclippaths">

To make better use of this feature of Modernizr, we should first add the class no-js
to our html element in our HTML source:
<html class="no-js">

Why do we do this? If JavaScript is disabled, Modernizr won’t run at all—but if
JavaScript is enabled, the first thing Modernizr will do is change no-js to js, as we
saw in the Safari 5 and Firefox 4 samples above. This way, you’ll have hooks to
base your styles on the presence or absence of JavaScript.

When Modernizr runs, as well as adding all those classes to your <html> element,
it will also create a global JavaScript object that you can use to test for feature support.
The object is called, appropriately enough, Modernizr. This object contains a
property for every HTML5 feature.

Here are a few examples:
Modernizr.draganddrop;
Modernizr.geolocation;
Modernizr.textshadow;
Each property will be either true or false, depending on whether or not the feature

Here’s an example of using an if/else block to test for geolocation support using
Modernizr:
if (Modernizr.geolocation) {
// go ahead and use the HTML5 geolocation API,
// it’s supported!
}
else {
// There is no support for HTML5 geolocation.
// We may try another library, like Google Gears
// (http://gears.google.com/), to locate the user.
}

Further Reading
To learn more about Modernizr, see:
■ Modernizr documentation: http://www.modernizr.com/docs/
■ A fairly comprehensive and up-to-date list of polyfills for HTML5 and CSS3
properties that can be used in conjunction with Modernizr is maintained at
https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills
■ A List Apart article, “Taking Advantage of HTML5 and CSS3 with Modernizr”:
http://www.alistapart.com/articles/taking-advantage-of-html5-and-css3-with-modernizr/
is available in the visitor’s browser.