I first learned about modernizr on Andy Clarke’s post “What does browser testing mean today” where he discusses among other things his thoughts on why websites don’t need to be experienced the same in every browser.  Modernizr is a javascript library that detects what html5 and css3 attributes a browser supports.  The library is only 3.9kb in size and for the most part detects features rather than detecting which browser the visitor is using. Ask ppk why this is a good thing.

It’s very easy to start taking advantage of modernizr.  It adds adds a bunch of hooks to your html element.  Here is a screenshot of firebug so you can see what it adds in Firefox 3.6:

This means that you can now add CSS3 attributes to only the browsers that support them.  For example, let’s say you want to have a shadow around an image without having to open up your bloated image editing software.  The following bit of css will apply the box-shadow property to browsers that support it and a 1 pixel border around browsers that don’t.

#my-cool-image {
 padding: 2px;
 border: 1px solid #ccc;
}
.boxshadow #my-cool-image {
 border-width: 0;
 box-shadow: #090A09 1px 1px 1px;
 -moz-box-shadow: #090A09 5px 5px 3px;
 -webkit-box-shadow: #090A09 1px 1px 1px;
}

The modernizr site provides excellent documentation on how to use it and information on all the hooks that are used.  It’s also an excellent resource for css3. I haven’t dove much into html5 yet so I’m not going to pretend to know what modernizr does for it.  I’ve also heard by Paul Irish that a plan for modernizr 2.0 is to allow the designer to select which tests they want to run. I still have to support legacy browsers but it’s becoming less painful than it once was. Very exciting stuff!