How to use Modernizr
CSS, HTML, Tools | November 10th, 2009
Photo by Stéfan
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:
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:
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 elements—header, 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)?
Modernizr is certainly a useful tool. But it isn’t always needed, depending on what you’re trying to do.
The simple multiple backgrounds effect in your post for example can be achieved without it. In one css rule you can declare the widely supported CSS2.1 single image background style, then directly afterward declare the advanced CSS3 rule with multiple images.
Like this:
#nice {
background: url(background-one.png) top left repeat-x;
background: url(background-one.png) top left repeat-x,
url(background-two.png) bottom left repeat-x;
}
Older browsers will not understand the second statement and so ignore it, CSS3 supporting browsers will use the cascade and apply the second rule. Your page is progressively enhanced and no js is required.
That is very true, in fact that is what I do on my own website for multiple backgrounds :)
But the point here is to show how Modernizr is used with a simple example.
Thanks for your input though.
Pete, I am glad u had mentioned a way to use mulitple backgrounds without js. But I want to know wheather we can use the same technique(without js)for box shadow and rounded-corners. I mean to write it in a way so that browsers that dont support it will ignore it.
Thanx a lot
Hi wimal,
Browsers that don’t support box-shadow and rounded corners will ignore them already, no need for an extra script for that.
Very cool and I found myself needing something like this sometimes, but I don’t like how you have to add a class to the HTML tag. Does that even validate? I would really rather add one to the body, and what modernizer could do is simply add the “js” tag and that’s it.
Also once CSS3 becomes more widely accepted and someday even in IE, you will have to do a lot of fixing up in your stylesheets.
If you want to avoid the need to update your stylesheets when CSS3 becomes standard and widespread, the solution is simple. Don’t use any CSS3 now or then.
Personally, I see no reason not to use it now.
Modernizr works without adding the no-js class to your HTML tag– then you have no fallback fro JS being unavaliable or disabled, but you can still use its many other features. For instance, I’m using it on a site now to detect support for @font-face and provide a Cufon fallback for browsers that don’t support @font-face.
The @font-face and cufon fallback was exactly what I envisioned. Also, I have in the past used javascript (jquery) to add extra div-wraps with different backgrounds for background and pseudo image border effects; with this I could make that code conditional (in fact, a lot of styling javascript hacks could be conditional).
Post very useful and easy to understand. But if I wanted apply Modernizr to the tag h1 ?
Ex.
if it is supported the shadow show it, otherwise not show the shadow .
Good to point out that after activating Modernizr on your page, if you view your browser source code you don’t see the new classes that Modernizr has added – but they are there! I spent an hour or two trying to ‘fix’ this when all the time it was working.
So have confidence and go ahead and try making use of these new classes to define what is displayed for HTML5 ready browsers and what’s not.
Vali
The classes are visible when you view source using Webkit’s Web Inspector (included in the Safari’s “Develop” menu, for instance) or Firebug.
Thanks John, forgot to mention that’s how I spotted the classes!
V
How do I style the html5 elements to work with IE?
To style HTML elements for IE you just need to code them like you normally do then open your car door, stick your had in and close it as hard as you can. :)