Feature Detection with Modernizr

Many of you, if you’re reasonably up-to-date with web design at the moment, will have heard of and used Modernizr but for everyone else out there, this article’s for you.

Modernizr is an independent JavaScript micro-library to help you develop modern websites but with graceful degradation. It enables you to specify different CSS depending on if a feature is present in the browser or not (as shown in the example below).

Modernizr also includes the html5shiv, which means with Modernizr running, HTML5 tags will work correctly in older browsers ( 🙂 ).

Example#

.cssgradients header
{
	background-image: linear-gradient(top, rgba(...), rgba(...));
	[etc...]
}

.no-js header, .no-cssgradients header
{
	background: #3366FF url(images/gradm2acc.png) bottom left repeat-x;
}

This piece of CSS is used on the header of this site. If CSS gradients are available within your browser, Modernizr will apply the .cssgradients class otherwise apply the .no-cssgradients class. In this example, if CSS gradients are available they are applied and if not an image is used instead. As well as this feature detection, a .no-js class is applied by default and removed if JS is running.

All these classes are added to the html tag, just to be aware, so they are one of the first things to be mentioned in the scope of your CSS.

Try it!#

Modernizr is available for download and comes with a custom builder so you only get what you need. It is essential to any website implementing CSS3 & HTML5 features.

Used Modernizr? Like it? Let me know in the comments below.