Modernizr – Javascript toolkit for HTML5 & CSS3

The title says it all 🙂

Modernizr is a Javascript library that detects various HTML5 and CSS3 features and lets you know if you can use them in that browser. The main aim of “Modernizr” is to put a full-stop to “UA sniffing” method. Modernizr does feature detection and lets you know what various browsers can and cannot do.

Modernizr makes it convenient for you in a variety of ways,

  • It tests for over 20 next-generation features, all in a matter of milliseconds;
  • It creates a JavaScript object (named Modernizr) that contains the results of these tests as boolean properties;
  • It adds classes to the html element that explain precisely what features are and are not natively supported

How it works?

To install Modenizr, download the javascript file from this URL and include modernizr-1.5.min.js file in your page as

<script src="js/modernizr-1.5.min.js"> <script>

The second step is to add a class of “no-js” on your html tag as

<html class="no-js">

Modernizr sets a boolean property for each feature it tests. Thus, checking for “Drag and Drop” is pretty straightforward, indeed a one-liner,

if (Modernizr.draganddrop) {
// Browser supports HTML5 DnD.
} else {
// Fallback to a library solution.
}

Modernizr also allows you to use the new HTML5 elements such as “headerhgroupsectionfootervideo, etc.,” and style them.But this doesn’t mean that these HTML5 elements will start working in Internet Explorer. All you can do is to style them in such a way that IE will understand them and not ignore them..

Have a look at this Modernizr documentation for more details.

Do you already use Modernizr? If not, how do you deal with browser compatibility?

Advertisements

One thought on “Modernizr – Javascript toolkit for HTML5 & CSS3

  1. Dairon Medina says:

    Nice post im recent using this library and look awesome the effect on non standar browsers

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: