Using Modernizr to detect CSS3 & HTML5 support

Last month I had the pleasure of attending Andy Clarke's For A Beautiful Web CSS workshop in Newcastle upon Tyne. Toward the end of the day, Andy gave a demonstration of Modernizr; a tiny JavaScript library that detects CSS3 and HTML5 support in web browsers. It allows you to progressively style content according to what your browser can handle, as well as provides a mechanism for deploying fallback techniques when a particular feature is not supported. Seeing Modernizr in action was a real eye–opener, especially in terms of the level of control it can offer to a web developer.

To use Modernizr, all you need to do is insert the Modernizr library into the <head> of your web pages:

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

Once your page is viewed in a web browser, Modernizr runs automatically and performs a series of tests to detect which CSS3 and HTML5 features the browser supports. The nice thing here is that Modernizr does not use any kind of nasty User Agent sniffing, it only performs tests that detect the actual features implemented in a browser. Modernizr then adds a series of CSS class names to the <html> tag in your web pages, based on the results of the tests it performed. For example, if Modernizr detects that your browser supports @font-face, it will add a class of fontface to your markup. If @font-face is not supported, it will add a class name of no-fontface.

<html class="canvas canvastext geolocation rgba hsla multiplebgs borderimage borderradius boxshadow opacity cssanimations csscolumns cssgradients cssreflections csstransforms csstransforms3d csstransitions video audio fontface">

Provide fallbacks for modern features

Developers can use the class names that Modernizr creates to provide fallbacks for features that are not supported by a web browser. For example, you could use Modernizr to specify a background image as a fallback replacement for browsers that do not support @font-face:

.no-fontface header h1 {
background: url("image.jpg");
text-indent: -9999px;
}

Alternatively, you could use JavaScript to deploy Cufon as a fallback:

Modernizr._fontfaceready(function(bool){
	if (!bool) getScript('cufon.withfont.min.js',function(){
	Cufon.now();
	});
});

Similarly, you could use JavaScript to apply a fallback for browsers that do not support CSS3 Border Radius:

if (!Modernizr.borderradius){
  // use JavaScript alternative
}

Or, use CSS to specify an alternate styling altogether, like a different border style for example:

.no-borderradius {
	border: 4px solid white;
}

Use HTML5 today

Modernizr also runs a JavaScript function that enables the styling of various HTML5 elements in Internet Explorer, similar to the HTML5 shiv and enabling scripts that are already available elsewhere. In addition, Modernizr detects a range of HTML5 features including Canvas, Audio, Video and the Geolocation API. One of the most appealing Modernizr features for me personally, is the ability to provide fallback JavaScript for browsers that do not yet natively support the new HTML5 form inputs:

if (!Modernizr.inputtypes.email){
	//Use alternative client side email validation
}

This provides a way to start progressively using HTML5 web forms today. As more browsers adopt support for these input types natively, the fallback will start to be used less and less until one day, it can eventually be removed altogether.

Summary

I am really impressed by the workflow control offered by Modernizr. It can provide web developers with a much finer degree of control when using features offered by the more advanced web browsers available today. If I want to provide a slightly different layout or margin setting when a particular feature is not supported — Modernizr lets me do it, and without any messy CSS hacks.

I do think there is a wrong way to use Modernizr however. JavaScript should not be relied upon to provide a layout for your pages, but more to offer alternative styling for certain use cases. When used intelligently, it can provide a wealth of alternate styling options before you reach your most common basic layout.