Checking browser support

So how do you know if the HTML5 feature you are about to implement is going to work? Well, the browser vendors are the ones to decide whether or not a specific feature works. As there are about four or five major browser vendors (and I am not even counting the ones for mobile devices such as tables as smartphones!) it is going to be uphill testing the feature yourself on all browsers and their different editions.

Luckily there are other people who do this work for you. CanIUse.com is such a site. They test almost every single one of the new features and the test the compatibility a long way back, version-wise, and on every mainstream browser.

Here is how it works

• Using the index. At the frontpage of CanIUse.com there is a comprehensive index of all the new features of CSS3, HTML5, SVG and JS API. You can simply click on the subject you want to check out, e.g. “New Semantic Elements" if we want to check out which browsers support the new <nav> element.
• Using the searchbox. If you are not sure of which category the feature you are looking for is placed in, you can always use the search box. Still looking for the nav element, all you have to do is type in nav and CanIUse.com instantly finds the right table for you.
• Understanding the tables. Now we have found the right table but it can be a bit confusing at the beginning. The first column indicates the browser version and the next columns are the individual browsers. All cells in the table are colored – a light green means that the feature are supported where as a light red indicates that it is not supported.

Now that you know which version of the different browsers supports your features it is time to use this knowledge! This statics used in combination with country specific statistics allows you to make a sound decision of whether or not it is worth the trouble to e.g. implement a JavaScript fallback.

Here is an example: Let’s say we want to use the <nav> element. According to CanIUse.com this is not supported by Internet Explorer 8.0 and previous version. If your webpage addresses users from Spain this means that, according to StatCounter Global Stat, approximately 36% percent of your visitors are going to be prevented from see your page correctly (as of January 2012 approximately 31% of the Spanish population uses Internet Explorer 8.0, and 5% uses IE7 – added up, this gives us 36%).

As you can see, it suddenly makes sense to check which browsers support which features – you might be so lucky that the features you are planning to use are supported by the mostly used browser in your region and therefore you do not have to use time implementing fallbacks.