How to use Modernizr

CSS, HTML, Tools | November 10th, 2009

Photo by Stfan <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 CSS3s use has been increasing among web designers, browser support for some of its
features is still inexistent.
Lately, Ive been using Modernizr more and more to cater for those browsers that dont
support specific CSS3 propertiesfor example, on my site, and it makes the
development much easier because I know Im providing these lesser browsers with an alternative
experience, rather than just ignoring them.
Bear in mind (and this is even splashed on Modernizrs front page), that Modernizr doesnt
actually magically enable these properties for browsers that dont 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 sites head tag, add a link
to 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) isnt on, then Modernizr
wont work at all (and probably other features of your site wont work either), so its good that
we have a fallback for that case.
! "!"#$%& $%&'()$*+,-.%/01%2!343+0/3)$(5"*!"#$%&5
! "'&() &67$$'(/,2)$(5
8
8
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 be
replaced dynamically and it may look something like this:
What does this mean? Lets take a look, shall we?
In this case, I opened the page on Firefox 3.5. This browser (sadly) doesnt 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.
Lets look at an example:
Multiple backgrounds
Your sites background has been carefully built and youre using the multiple background
technique 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:
! "'&() &67$$'()$ &7/97$ &7/97$:.;: <.,6,&7:0,/ %<=7 >$67 /,2+?6:0@6.=<$ =,%-.%0+7<. =,%-.%%7
!
A
B
C
D/0&. E
*+",-#./01F ?%6G=7&H<%,?/-2,/.3@/<I :,@ 6.J: %.@.7:2;K
?%6G=7&H<%,?/-2:L,3@/<I =,::,+ 6.J: %.@.7:2;M
N
!
A
B
C
O
D/0&. E
*+",-#./01F ?%6G=7&H<%,?/-2,/.3@/<I :,@ 6.J: %.@.7:2;M
N
3+?6:0@6.=<$ D/0&. E
*+",-#./01F ?%6G=7&H<%,?/-2,/.3@/<I :,@ 6.J: %.@.7:2;K
8
8
8
Web Designer Notebook How to use Modernizr http://webdesignernotebook.com/css/how-to-use-modernizr/
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 its 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 doesnt 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:
P
Q
?%6G=7&H<%,?/-2:L,3@/<I =,::,+ 6.J: %.@.7:2;M
N
Web Designer Notebook How to use Modernizr http://webdesignernotebook.com/css/how-to-use-modernizr/
3 of 42 3/24/14, 4:02 PM
Conclusion
I hope that I managed to explain the usefulness of Modernizr. While we cant 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)?
Your Comments:
Pete says:
10 November, 2009 at 2:51 pm
Modernizr is certainly a useful tool. But it isnt always needed, depending on what youre
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.
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 multiple
backgrounds :)
But the point here is to show how Modernizr is used with a simple example.
Thanks for your input though.
Reply
!
"
!" $%&'()*+,)-.(&/&012+&*3 4
5
6
Web Designer Notebook How to use Modernizr http://webdesignernotebook.com/css/how-to-use-modernizr/
4 of 42 3/24/14, 4:02 PM