How to use Modernizr

There is a tool that came to make our lives as progressive web designers a bit easier: Modernizr. In this short tutorial, learn how to apply this handy script to maximum effect on your sites.

An overview

Although CSS3’s use has been increasing among web designers, browser support for some of its features is still inexistent.

Lately, I’ve been using Modernizr more and more to cater for those browsers that don’t support specific CSS3 properties—for example, on my site—, and it makes the development much easier because I know I’m providing these lesser browsers with an alternative experience, rather than just ignoring them.

Bear in mind (and this is even splashed on Modernizr’s front page), that Modernizr doesn’t actually magically enable these properties for browsers that don’t support them. It just tells the page whether that feature is supported on the browser the visitor is using or not.

How it works

To install Modernizr, download the file from this page. Then, on your site’s head tag, add a link to the file. For example:

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

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

<html class="no-js">

Why add this tag?
Because that will be the default state of the page. If JavaScript (js) isn’t on, then Modernizr won’t work at all (and probably other features of your site won’t work either…), so it’s good that we have a fallback for that case.

If JavaScript is indeed enabled, once that page is loaded on the browser, that class will be replaced dynamically and it may look something like this:

<html class="js canvas canvastext geolocation rgba hsla no-multiplebgs borderimage borderradius boxshadow opacity no-cssanimations csscolumns no-cssgradients no-cssreflections csstransforms no-csstransforms3d no-csstransitions  video audio cufon-active fontface cufon-ready">

What does this mean? 
Let’s take a look, shall we?

In this case, I opened the page on Firefox 3.5. This browser (sadly) doesn’t support multiple backgrounds, CSS gradients or CSS transforms, therefore, Modernizr outputs “no-multipebgs“, “no-cssgradients” and “no-csstransforms“. On the other hand, it does support canvas and border-radius, which explains “canvas” and “borderradius“. Etc.

How to use this (precious) information?

So what can you actually do with this? How does that help you in any way?, you might ask.

Let’s look at an example:

Multiple backgrounds

Your site’s background has been carefully built and you’re using the multiple background technique to make it simpler (and faster!) to code. Your CSS may look like this:

#nice {
	background: url(background-one.png) top left repeat-x,
	url(background-two.png) bottom left repeat-x;
}

And a nice browser will render this:

modernizr-safari

Using Modernizr, your CSS will look instead like this:

#nice {
	background: url(background-one.png) top left repeat-x;
}
.multiplebgs #nice {
	background: url(background-one.png) top left repeat-x,
	url(background-two.png) bottom left repeat-x;
}

This is what your visitors will get, depending on which browser they have:

modernizr-safari modernizr-opera

This is a very simplified use of Modernizr, but hopefully it’s enough to show you what you can do with it.

HTML5

Modernizr also allows you to use the new HTML5 elementsheader, hgroup, section, footer, video, etc.—and style them.

This doesn’t mean that some of these elements will start working on Internet Explorer, but that you can style them and that IE will understand them and not ignore them.

JavaScript

You can also detect features using Modernizr in your JavaScript, using this syntax:

if (Modernizr.geolocation) {
}

Conclusion

I hope that I managed to explain the usefulness of Modernizr. While we can’t rely on the fact that browsers support the full spectrum of features we want to use, this is the best tool out there to provide for both worlds.

Do you use Modernizr too? How? If not, how do you deal with some browsers not supporting some features (assuming you are using the latest CSS3 techniques)?