Modernizr: start implementing CSS 3 and HTML5 features now
So, you're a web designer, and you want to start taking advantage of new features in CSS 3 and HTML5. That's great, but you know that most of your users aren't running browsers that support these new standards. You could just wait for browsers to get with the times, or you could check out Modernizr .
Modernizr is a JavaScript library by Faruk Ates that detects which functionality a browser can support, and allows you to use if-statements to fine-tune your fallbacks for browsers that don't support the new hotness. Modernizr can't fix old browsers, but it can make it more practical to support newer ones. On top of all the CSS 3 styles it can detect support for, it also allows you to use and style HTML5 elements without breaking your site for IE users. Not too shabby for a little bit of JavaScript.
Tutorial
In this brief tutorial we'll look at how to add Modernizr to your site and start using it. It should be enough to get you going, but more detailed tutorials and techniques will come in the future. When they do, they'll be announced either on this site or, and this is more likely, on the Modernizr twitter account .
Download and include
First, you must download the latest Modernizr code .
Include the modernizr-0.9.js file into your page, directly after the <body> element like this:
<body>
<script src="/path/to/modernizr-0.9.js"></script>
Writing conditional CSS with Modernizr
Now, once your page loads, Modernizr will run and go through all of its tests. It will automatically add all the classes to the <body> element of the page, and these classes will be along the lines of body.feature or body.no-feature , with the former indicating that the current browser supports that specific feature and the latter indicating that the browser does not support the feature.
Additionally, it will create a new JavaScript object in the global scope, called Modernizr . This object will contain properties for each of the features that Modernizr detects for, and their value will be set to TRUE or FALSE depending on the browser's support for it.
What you can do from this point on is write pseudo-IF/ELSE statements in your CSS. Let's look at an example from the Modernizr.com site itself:
.cssgradients
#main {
background: -webkit-gradient(linear, left 0, right bottom,
from(rgba(255,255,255, .82)),
to(rgba(255,255,255, 0))) 0 0 no-repeat;
}
In the above example, we're doing an "IF" condition in CSS: IF the browser supports both CSS gradients, THEN apply this background property to the #main element (instead of the original background property).
Writing conditional JavaScript with Modernizr
When leveraging Modernizr in your JavaScript, it's as straight-forward as it can be to do IF-conditions based on what the browser currently supports:
if (Modernizr.cssgradients
) {
// perform some actions you only want to
// execute if the browser supports gradients
}
There really is nothing out of the ordinary about it, so if you're a JavaScript programmer you're good to go.