Modernizr is an open source, MIT-licensed Javascript library that allows web designers and developers to start using HTML5 and CSS3 features while still having precise control over older browsers. While the site loads, it automatically checks the browser’s support of new HTML features like <canvas> and <video> and new CSS properties like border-radius, box-shadow, and text-shadow. It then provides the results in a global variable, and adds classes to the <html> element which allow you to handle the CSS and Javascript differently for incompatible browsers.
Getting started is easy — you just need to download the latest version of the library, place it in your main or /js directory, put a class of “no-js” in your <html> tag and link to the file address in your <head>.
<html class="no-js"> <head> <title>Using the Modernizr library</title> <script type="text/javascript" src="js/modernizr-1.7.min.js"></script> </head> <body> </body> </html>
The file itself is only 3.7 kilobytes and the script runs automatically without any sort of initialize() function for you to run. After the script is loaded, you can test for various support by checking the properties of the global Modernizr object.
if (Modernizr.canvas) {
// We can play with the <canvas>!
} else {
// Sad time! No <canvas>!
}
Additionally, you can use different CSS depending on whether there is support of an element by using the new <html> classes that Modernizr adds. A full list of the Javascript properties and CSS classes is available in the Modernizr documentation.
/* Happy background for canvas support */
.canvas {
background: yellow;
}
/* Sad background for no canvas support */
.no-canvas {
background:
}
The last thing that Modernizr takes care of for you is creating dummies for the new HTML5 Semantic Elements. This allows less supportive browsers to recognize (and let you style) elements like <header>, <footer>, <nav>, <section>, and <article>. This keeps Internet Explorer from inserting unrecognized elements into the DOM as empty nodes with no children. You can now use the newest HTML5 elements in your markup, and style them in your stylesheet, without having to worry about whether they are supported.
That’s all there is to it, so get started using HTML5 today!