HTML 5 Feature Support

I recently prepared a chapter about HTML 5 for our QFrame bootcamp. The main thought for this chapter was: is it already possible to implement HTML 5 sites without all users having to upgrade to the newest browser versions. Most talks and sites about HTML 5 only tell you how great it is, using HTML 5, and how many cool new features you can now use. But still, I, as a developer, need to make sure that everyone who visits the sites I create, can view them more or less the same way. In this post I will show you my findings on the new HTML 5 features support. A next post will handle how you can make your sites HTML 5 compatible, even for older browsers.

So, I tried to get an idea of how far all browsers are already implementing the new HTML 5 spec. The html5test site gives you a good idea of which features a browser supports. You open this site in a browser of your choice and you get an overall score (the maximum score is 400) and an overview of which features are supported and which features are not. If you use the latest version of chrome for instance, you get a total score of 293, which is pretty good, almost 75 percent of the spec is supported.

The features that are not supported in chrome are:

• MPEG-4 support, when using the new video tag
• some new form field types 
• microdata
• the FileWriter API (FileReader is supported)
• ...

All in all this is a short list and thus the high score for Google Chrome.

I also ran this test for Firefox. At the time I took the test I was still using version 3.6.3, which is a pretty old one. I have to admit I am pretty content with chrome's speed of showing web pages and haven't returned to Firefox since I installed the Google browser. Still, version 3.6.3 of Firefox still got a score of 155, which is less than half, but still pretty good for a pretty old version.

Since this was a lower score, I also tested for the latest version of Firefox (4.0.1) and off course got a much better score of 240, which is closer to the chrome score.

But now, the big question was, what about IE 9? Ever since Microsoft released their newest version of IE they have also been promoting their HTML support. Keeping this in mind, I was expecting a really high score here. But, alas, the actual result was quite disappointing. IE9 scores an overwhelming (mind the pun) 130 points. That is even less than my old Firefox version gets!

I also tested some more browser versions using the SuperPreview tool that is included in the Expression Suite. This tool allows you to test web sites in different browser versions. The tool uses the browser versions that it can find on your operating system and also offers some on-line browsers. This makes it possible, for Microsoft geeks like me, to, for instance, test sites in Safari. Version 4 scores 139 (more than IE9 again), version 5 scores 228.

I must say it is a pretty handy tool, but it comes with some restrictions. For instance, not all JavaScript always runs as it should. And the on-line chrome version for instance, gets a lower score for the html5test site. I'm thinking they don't have the latest chrome version installed at Microsoft. 

But still, I was able to get a score for IE6 up untill IE8. Not that it were high scores, 17 and 32 respectively. 

Which really makes you think whether you can already start using HTML 5 features today. I am pretty sure that for normal people (not geeks like you and me) not everyone has upgraded to IE9 yet. 

The last test I executed, was using the web browser of my new Windows Phone 7. Here I also got a score of 17. Pretty low, if you ask me. The good news is that with the new Mango update for Windows Phone 7, there will also be a IE9 browser. The bad news is, on the iPhone and Android devices you can already get a score of 132 and 182 respectively. 

I hope this gives you a nice view as how far browsers are in implementing the new HTML 5 spec. Still, The question remains 'can I start using HTML 5 features today'. I will already answer this for you: yes you can! Even if some browsers score low in a feature test for HTML 5. In a next post I will show you which parts of the spec you can start using and how you can implement fallbacks for older browsers.