Modernizr: HTML5 and CSS3 detection

Ajaxian » Front Page by Dion Almaer

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:

CSS:

  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:

CSS:

  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.

Cet article a été publié dans Uncategorized. Ajoutez ce permalien à vos favoris.

Laisser un commentaire

Entrez vos coordonnées ci-dessous ou cliquez sur une icône pour vous connecter:

Logo WordPress.com

Vous commentez à l'aide de votre compte WordPress.com. Déconnexion / Changer )

Image Twitter

Vous commentez à l'aide de votre compte Twitter. Déconnexion / Changer )

Photo Facebook

Vous commentez à l'aide de votre compte Facebook. Déconnexion / Changer )

Photo Google+

Vous commentez à l'aide de votre compte Google+. Déconnexion / Changer )

Connexion à %s