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
[sourcecode lang=”html”]
<script src=”js/modernizr-1.5.min.js”> <script>
[/sourcecode]
The second step is to add a class of “no-js” on your html tag as
[sourcecode lang=”html”]
<html class=”no-js”>
[/sourcecode]
Modernizr sets a boolean property for each feature it tests. Thus, checking for “Drag and Drop” is pretty straightforward, indeed a one-liner,
[sourcecode lang=”html”]
if (Modernizr.draganddrop) {
// Browser supports HTML5 DnD.
} else {
// Fallback to a library solution.
}
[/sourcecode]
Modernizr also allows you to use the new HTML5 elements such as “header, hgroup, section, footer, video, 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?
