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.