The waiting game is over. CSS3 is finally here. No longer a web designer’s pipe dream, this specification has finally caught on with modern, standards-compliant browsers. This means we get to start using many of these cutting-edge features today.
Thanks to Modernizr, now we can spend less time in our image editors in favor of leveraging the internal design features of the browser itself. The tedium of building out rounded corners, drop shadows, and custom typeface hackery (just to name a few) can now be eliminated with a few lines of code — much easier to maintain and update too. Unfortunately, adoption of these features varies widely across the vast browser landscape, especially amongst the older, more stubborn types (I’m looking at you, IE). So how do we move forward applying this polish without leaving some of our elderly acquaintances behind? Luckily for us, Modernizr provides the answer.
Modernizr is a wonderful little Javascript library that performs an array of feature checks for these new technologies within the end-user’s browser and informs us of its capabilities. Currently, Modernizr conducts a series of tests for over fifty new CSS3 and HTML5 features — all within a matter of microseconds. This information is returned to us for easy manipulation via convenient styling and scripting hooks. I’ll explain in detail how this works in just a moment. But first…
Getting Started
To begin, take a trip to Modernizr’s home page and download the development version. You may notice that it also comes packaged in a “production” flavor, which allows you to download an optimized file according to the feature checks of your choosing. However, the development version is filled to the brim with comments that may help you understand how this thing ticks from the inside out.
Once downloaded, you’ll want to include the script in the head of your web site like so (be sure to add the “no-js” class to the html element – this will provide an additional hook in the rare event that Javascript should be disabled):
<html class="no-js"> <head> ... <script src="path/to/modernizr-2.x.js"></script> ... </head> ... <body> ... </body> </html>
Simple. That’s all there is to it. The rest is up to you, gentle web designer. Upon page load, Modernizr will replace the “no-js” with a slew of helper classes based upon the results of its feature tests. For example, if the user’s browser supports the CSS3 border-radius property it will append a “borderradius” class to the html element; if not, it will use “no-borderradius” instead. These dynamic classes can then be used in your stylesheets to bridge the browser generational gap, targeting the stylish cool kids without ditching support for the downtrodden has-beens — everyone wins.
A Real World Example:
One of my favorite CSS3 features is the relatively well supported box-shadow property. Sadly, older browsers were not built with the ability to interpret the meaning of this property. So how do we make both parties happy? Modernizr’s helper classes to the rescue. For instance, say that I have a light-colored <div> (with an id of “box”) on the page that I’d like to set off from its similarly light-colored background with a drop shadow. Using CSS3, it’s a breeze:
.boxshadow div#box {
-webkit-box-shadow: 0px 0px 4px #ffffff; /* Saf3-4 */
-moz-box-shadow: 0px 0px 4px #ffffff; /* FF3.5 - 3.6 */
box-shadow: 0px 0px 4px #ffffff; /* Opera 10.5, IE9, FF4+, Chrome 10+ */
}
But what about older, less capable browsers? We don’t want to hang these soon-to-be relics out to dry just yet. Since we’re unable to take advantage of the box-shadow property, we can resort to using the next best thing – a classic border. With the assistance of Modernizr we can now target the styles for these browsers as follows:
.no-boxshadow div#box {
border: 2px solid #FFF;
}
While it may lack the cool-factor of a CSS3 drop-shadow, a nice border will do the trick to create nice visual separation between this div and its background. This simple illustration serves to demonstrate the awesome flexibility that Modernizr affords the modern web designer.
A Word of Caution
It’s crucial to remember that Modernizr does not magically add these new bells and whistles to browsers that don’t yet support them (though there are some stop-gap, polyfill solutions if your project requires absolute conformity from browser to browser — please proceed with caution). What it does do, however, is provide us with a clever mechanism for progressively enhancing pages for those with capable browsers without breaking the user experience for those that don’t.