When can I use HTML5 & CSS3?

As web designers we want to know when we can start to roll out HTML5 and CSS3 functionality on our client's sites and we want to share that knowledge.  So last Autumn we built findmebyip.com; a free testing tool that sends you a live, detailed report of what your client's browser supports.

Since the 23rd of October 2009 findmebyip.com has collected some 56,000 detailed, real-world results of HTML5 and CSS3 browser capabilities. Today we've added those results to our massively popular litmus test summary page. 

View: HTML5 & CSS3 Browser Support Scores

And the winner is...  CSS3 Selectors

The most promising areas seem to be CSS3 Selectors.  Some selectors which have picked up support in IE7 are now nearly ubiquitous.  Post prominent are are the three attribute match selectors - begins, ends, matches - and the general siblings selecto.  The other CSS3 Selectors enjoy good support across the other browsers with only the earlier FF3s missing a few things.  The lack of earlier FF3 support for things like n-th child accounts for a 2% drop off for those features. 

/** Available in all but IE6(!) **/
.foo[ attr ^= "string" ] { }
.foo[ attr $= "string" ] { }
.foo[ attr *= "string" ] { }
.foo ~ bar { }

CSS3 Properties - Font Face is here!

Most widely available of the CSS3 Properties is of course Font Face which has been available in IE for decades.  With Google's recent release of their font API the deregulation of typefaces looks like a real possibility. 

A few other notable properties are the use of RGBA and HSLA and Opacity.  Guess what, yes, IE doesn't support them yet so you'll still have to hack about with proprietary filters if you want your sites to look the same in IE.

Web Applications Coming of Age

IE8 support for HTML5s storage architecture and Google's shift to supporting HTML5 over Gears is all looking very promising for the future of faster, less bandwidth intensive web application development.  Chrome 5 has in fact, just recently become the first browser to tick all of our HTML5 Web Application boxes.

Geo Location is still trailing behind according to our test although good mobile support for Geo Location isn't really illustrated in these results.  There's a mobile version of our litmuse results page coming soon incidentally... just waiting for the amazing guys behind litmusapp to launch their mobile browser tests. ( I think they're a bit too excited about their email analytics to care right now! )

What's not ready?  HTML5 Forms

HTML5 form input types and form attributes are quite a long way behind the rest of the class. This is down to little or no support from Firefox or IE.  Chrome 5 again gets a big gold star for having the most comprehensive HTML5 Form support.

War of the Codecs

I'm going to be honest here and say that I'm not massively familiar with all the different HTML5 Audio and Video Codecs.  From our results it would seem that both the ogg/vorbis audio and video codecs have the widest support.  I am slightly concious that there were some recording bugs when we first added A/V codecs though. This is partly why we've excluded all the earlier results, calculating our scores from just the last 20,000 (2 months of) results.  I' d be very grateful if someone more knowledgeable about HTML5 Audio & Video codecs would take a look and give an opinion.

A word about Internet Explorer and IE9

Yes, I'm sorry, it has to be said...  the world is waiting for IE to get its act together on this one.  

Firefox and Apple are providing pretty wide support for CSS3 and HTML5 already.  The litmus charts show the leap that Firefox made with FF3.6.  

Google seem to have just stormed ahead of the field taking Chrome 5 to almost universal support for all of our tests save for two form attributes - autocomplete and list - and two audio codecs.

What about IE9??  Well, lots of people have been asking for us to add IE9 results to our table.  Unfortunately at the moment the javascript used to record the results doesn't seem too happy in IE9.  We use a combination of prototype.js, modernizr.js and a little jimbo.js to test and record and we haven't had a chance to diagnose where the problems lie.  If anyone is familiar with IE9's javascript capabilities please, please get in touch and we'll add IE9 to the results.  Everyone's waiting to find out how it fares!