Wednesday, July 1st, 2009

Modernizr: HTML5 and CSS3 detection

Category: HTML, Standards

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

  1. .cssgradients #main {
  2.     background: -webkit-gradient(linear, left 0, right bottom,
  3.         from(rgba(255,255,255, .82)),
  4.         to(rgba(255,255,255, 0))) 0 0 no-repeat;
  5. }

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:

javascript
< view plain text >
  1. if (Modernizr.cssgradients) {
  2.     // perform some actions you only want to
  3.     // execute if the browser supports gradients
  4. }

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.

Related Content:

Posted by Dion Almaer at 11:29 pm
7 Comments

++++-
4.2 rating from 24 votes

7 Comments »

Comments feed TrackBack URI

Psst: your second code example lists it as CSS but it’s JavaScript inside it. :-)

Comment by KuraFire — July 2, 2009

I like the idea, but what sort of performance hit are you going to see in IE7/IE6 by including this on your site? Especially since you’re changing the tag’s class attribute, which will cause reflow if you add clientside on page load.

Comment by zachleat — July 2, 2009

You’re supposed to embed it directly after the BODY element, precisely to avoid any reflow / restyling issues.

It’s only doing one real DOM operation, and that’s added the series of classes to the BODY element. The whole thing is only 16kb uncompressed (6kb compressed) and typically runs in less than 20 ms on modern machines. It’ll be a bit longer in IE6 because it has such a slow JavaScript engine, but it’s still very much within acceptable ranges.

Comment by KuraFire — July 2, 2009

Slashdotted? o_O

Comment by eyelidlessness — July 2, 2009

Modernizr is hosted on Google AppEngine, which suffered a system-wide down period this morning. It’s back up now, though.

Comment by KuraFire — July 2, 2009

You have no idea the hacks you have to produce to be able to write both CSS 3 and 2.1 compatible stylesheets that don’t mess with each other.

This little script could really save a lot of time and headache.
Thank you!

Comment by hdragomir — July 12, 2009

I’ve made a similar open source lib called “Supports.js” (http://dev.netzgesta.de/).
Whenever you need to know if a CSS property is supported and what it’s DOM name is!
It allows you to check style features and also referable style values.
It depends not on a fixed list of items to check and therefor it is forward compatible.
It’s only about 2600 bytes and without the heading comments less than 2048 bytes.

Comment by ucanmexwise — August 29, 2009

Leave a comment

You must be logged in to post a comment.