Modernizr: HTML5 and CSS3 detection

4 Jul 2009

Modernizr is a new library that detects various HTML5 and CSS3 features and lets you know so you can use them:

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:

PLAIN TEXT

CSS:

.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:

PLAIN TEXT

CSS:

if (Modernizr.cssgradients) {

// perform some actions you only want to

// execute if the browser supports gradients

}

We are seeing a growth in these kinds of tools and shims to get HTML5 features into developers hands. Another great site to help is the new HTML5 Doctor.

Programming Blog

Modernizr: HTML5 and CSS3 detection

Comment Form

About this blog