How to Use Modernizr

How to use ModernizrCSS, HTML, Tools | November 10th, 2009

Photo by Stéfan <http://www.flickr.com/photos/st3f4n/1419405808/in/set-72157602101989902/>

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 itsfeatures is still inexistent.

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

Bear in mind (and this is even splashed on Modernizr’s front page), that Modernizr doesn’tactually magically enable these properties for browsers that don’t support them. It just tellsthe 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 linkto the file. For example:

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

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

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

1 <html class="no-‐js">

?

?

Web Designer Notebook » How to use Modernizr http://webdesignernotebook.com/css/how-to-use-modernizr/

1 of 42 3/24/14, 4:02 PM

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

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 multiplebackgrounds, CSS gradients or CSS transforms, therefore, Modernizr outputs“no-multipebgs“, “no-cssgradients” and “no-csstransforms“. On the other hand, itdoes 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 backgroundtechnique to make it simpler (and faster!) to code. Your CSS may look like this:

And a nice browser will render this:

Using Modernizr, your CSS will look instead like this:

1 <html class="js canvas canvastext geolocation rgba hsla no-‐multiplebgs borderimage borderra

1234

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

12345

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

?

?

?


2 of 42 3/24/14, 4:02 PM

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 dowith 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 thatyou 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:

67

url(background-‐two.png) bottom left repeat-‐x;}


3 of 42 3/24/14, 4:02 PM

Conclusion

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

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

Your Comments:

Pete says:10 November, 2009 at 2:51 pm

Modernizr is certainly a useful tool. But it isn’t always needed, depending on what you’retrying to do.

The simple multiple backgrounds effect in your post for example can be achieved withoutit. In one css rule you can declare the widely supported CSS2.1 single image backgroundstyle, 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 supportingbrowsers will use the cascade and apply the second rule. Your page is progressivelyenhanced and no js is required.

Reply

Yaili says:10 November, 2009 at 2:59 pm

That is very true, in fact that is what I do on my own website for multiplebackgrounds :)

But the point here is to show how Modernizr is used with a simple example.

Thanks for your input though.

Reply

12

if (Modernizr.geolocation) {}

?


4 of 42 3/24/14, 4:02 PM

How to Use Modernizr

Documents

Transcript of How to Use Modernizr