HTML5, Part II: What Features Does My Browser Support?

Last week we dived right in to our discussion of  HTML5 with a quick tutorial on how to embed video, but we also mentioned that modern browsers support a subset of the new markup – no browser is yet 100% HTML5 compatible. So how can you tell (aside from running around looking up references) which features are supported?

When your computer downloads a webpage, it starts by creating the Domain Object Model (DOM), which is a collection of objects representing all elements on the page. If a browser supports a particular element or feature in HTML5, its DOM will contain that information. While you can check for each element you need individually, MIT has provided a javascript library that detects support automatically. After downloading it, you’ll need to include the following element inside the page head:

<script src=”modernizr.min.js”></script>

 

The script runs automatically when the page loads and creates an object called Modernizr that you can test to see which features it detects by checking the truth value of the appropriate boolean.  For example, to check whether the browser supports HTML5 Audio, you could use a line in your javascript saying:

if (Modernizr.audio) {

The website contains sample usage for each of the items it checks. Additionally, it helps keep things from breaking in Internet Explorer. By using Modernizr, you can serve the appropriate HTML5 code to modern browsers, while providing other content that will make sense to older browers.

Remember last week when we talked about  putting three different <source> tags inside a <video> element? Another option would be to use Modernizr to check what type of video the browser is capable of playing:

if (Modernizr.video) { // Does the browser support HTML5 video?

if (Modernizr.video.ogg) {

//play Ogg Theora video / Vorbis audio in an Ogg container
} else if (Modernizr.video.h264){

// play H.264 video / AAC audio in an MP4 container

}

}

Now that we’ve seen how to figure out what features the user’s browser supports, let’s get back to things that most browsers do. Next up, something every modern browser (even IE 8) supports: local storage!