File Under: Web Basics

Using HTML5 Today With Modernizr

Web developers looking to play with the new features in HTML5 are still struggling with incomplete and inconsistent browser support. While HTML5 is far from perfect (and complete), that doesn’t mean you can’t use it; it just means using it is a little more complicated since you need to detect the current browser’s level of support and then adjust accordingly.

Fortunately there is Modernizr, a very nice JavaScript Library that can detect which HTML5 features are available to the current user’s browser. With that information you can then create conditional JavaScript statements to offer HTML5 to those browsers that support it, but still fall back on other content for those that don’t.

We’ve covered Modernizer before, taking a look at its basic capabilities and how you can use them, but now Mark Pilgrim — of Dive Into Python fame — has released another chapter of his coming Dive into HTML5 book with a much more in depth look at how to detect HTML5 features and what to do for fallback content.

Pilgrim also covers some more complex scenarios. For instance, he shows how detecting support for the HTML5 <canvas> element is often not enough to determine compatibility since different browsers support different aspects of the full API. In one example, Pilgrim shows how to detect <canvas> support and then adds further checks for those who need the Canvas Text API.

Another pain for web developers is the mixed bag of support for the <video> element. Nearly all the latest versions of popular browsers support <video> (well, not IE8, but we’re assuming that’s no surprise), but then even those that do support <video> support different video formats. Mozilla wants .go files, Safari will be looking for .mp4 videos, and so on. Pilgrim offers up a series of checks to figure out which video to serve using Modernizr.

We know what you’re thinking: this HTML5 stuff is more trouble than it’s worth. Right now, you’re probably right. But in a year or two, HTML5 will be spoken everywhere on the web, and taking the time to figure it out and start using it now will put you well ahead of the learning curve.

Check out Pilgrim’s post, and be sure to keep an eye on Webmonkey for more HTML5 coverage.

Photo: svenwerk/Flickr

See Also: