File Under: CSS, HTML5, Web Standards

Handy Guide to Detecting Support for HTML5

What language does that browser speak?

What language does that browser speak?

Web developers wanting to use the new features in HTML5 or CSS3 are still struggling with incomplete and inconsistent browser support. While HTML5 isn’t perfect (or complete), that doesn’t mean you can’t start using 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.

One solution is to use some JavaScript to detect the level of support in the current browser and then use HTML5 where you can and offer alternatives to browser that don’t support the features you’re using.

Modernizr is handy little library can detect which HTML5 features are available to the current user’s browser. Armed 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.

There are however, some cases where Modernizr might be overkill. For example, if you just want to embed some HTML5 video, you only need to detect one element. If Modernizr isn’t right for your project, check out Mark Pilgrim’s new list of ways of detecting HTML5 elements. The list of elements and how to detect them is an appendix to Pilgrim’s book in progress, Dive Into HTML5.

The list isn’t just elements, though it does cover those as well, but it also shows you how to detect API support for things like offline storage or geolocation, as well as SVG, SVG-in-HTML and even which video codec the current browser supports.

One thing Pilgrim doesn’t include is detecting CSS3 features, so if you need to that info you’re on your own (or you can use Modernizr, which detects most of CSS3).

See Also:

Photo: Darwin Bell via Flickr/CC