Browser support for CSS3 and HTML5
We've tested all the A-grade browsers for their CSS3 and HTML5 support using FindMeByIP.com. The results have been very interesting.
-
CSS3 and HTML5 feature support
Last week we launched FindMeByIP.com, a simple app which reveals your browsers' support for CSS3 and HTML5 features in an easy to read format using Modernizr.
We've had a great response and we're going to be implementing some of your feedback in the near future.
For now though I thought people mind find it useful to know the state of support in the current browser market. I've taken all the A-Grade browsers and tested them one-by-one for their feature support . Needless to say it's produced some interesting results.
Safari 4 (Win)

Safari (on Windows) has by far the best feature set in the current market, outdoing competitors like Firefox 3.5 and even Google Chrome.
Particularly interesting is the excellent support for CSS3 animation properties such as CSS Transforms & CSS Animations, which enable the developer to define javascript-like rotation, movement and easing via CSS (advanced demos).
HTML5 features are well supported with Canvas, Video and Audio all implemented. Only the Geolocation API is currently not available, although apparently this is in the pipeline.
Firefox 3.5 (Win)

Firefox 3.5 has good support for features that you might be looking to use in your client work on a day-to-day basis. @font-face, box-shadow, rgba() and border-radius all work nicely.
Although, it doesn't quite match up to Safari when it comes to CSS animation, it makes up for this with solid implementation of HTML5 media (video and audio).
A major plus is that Firefox 3.5+ implements the first public draft of the Geolocation specification from the W3C which I anticipate will be very useful in future web applications.
Google Chrome (Win)

As you'd expect for a WebKit browser, Chrome has really excellent support for almost all of the Modernizr tests generated by findmebyip.com.
The big let down is the lack of support for @font-face. This has been widely documented and there are known work arounds for it. Google has promised that the next version of Chrome will add native support for web fonts.
I was very surprised to see 3D Transforms return positive. I believe this is currently only supported by the iPhone and iPod Touch so I'm not sure about the accuracy of this result.
Opera 10 (Win)

We got quite a few comments about Opera's perceived lack of support for advanced features. It's true that support for CSS3 features is poor, especially when border-radius still hasn't been implemented.
Nevertheless, as Bruce Lawson has suggested to me, Opera does have good support for other important web standards which are currently not being tested by findmebyip.com. He highlights "Web Forms 2" and SVG support as two primary examples of Opera's excellence in these areas.
Nonetheless, I still feel that Opera needs to catch up with the CSS3 spec if it wants to be adopted by the mainstream web dev community.
Internet Explorer 6, 7 & 8

And now the one you've all been waiting for. Lets all have a good laugh! Well not quite, because unlike some other contenders, Internet Explorer does actually support @font-face (all be it only in .eot format). In fact it's supported it for a while, with even IE6 providing complete support!
Nonetheless, with the exception of font-face, Internet Explorer does display a marked lack of support for almost every kind of advanced/progressive feature. Hopefully the IE team will be able to look at this in a future release, but I'm not holding out any hope.
Summary
There is now a consistent level of support for many of the CSS3 and HTML5 features that the average developer might use for progressive enhancement. From my survey the most widely supported features were:
- rgba()
- hsla()
- opacity()
- border-radius (except Opera)
- canvas
Outside of these however, support is patchy and is largely dependant on the whim of the browser manufacturer. Some browsers are way ahead of the game (Safari), whilst others have a intermediate (Firefox) or even poor(?) support (Opera).
It should be noted however, that findmebyip is not perfect and as a result doesn't report on all advanced features. We'll be upgrading the site in the near future to include a full range of tests for Web Forms and even SVG graphics, so perhaps another test will be in order then.
Finally a request to you Mac geeks out there. Unfortunately, we don't run Mac's so I can't comment on OSX versions of these browsers. If anyone would like to let us know how the Mac versions of these browsers perform and post them as a comment we'd be very grateful.
102 Comments on this post
Speak to an Expert now on 01225 444 674
Talk to Us
Jon said “Fab insight Dave!” last year
Russ said “Great work, but make it more usable, accessible?” last year
Ann said “Mac results” last year
Lucas said “Mac browsers…” last year
Simon said “Details of browsers on OS X 10.6” last year
Adam said “Mac Browsers” last year
Magne said “A few notes...” last year
Chris said “Mac Browsers” last year
Magne said “The browsers on a Mac...” last year
Doug said “Further Thoughts” last year
Arve said “Neat.” last year
Jesse said “Mac Version Results” last year
Chris said “Mac Browsers” last year
Stewart said “RE: Mac user” last year
Fred said “Mac versions” last year
J said “Safari / OS X” last year
Mark said “3D Transforms [or the lack thereof] in Chrome” last year
cj said “safari 4/ff 3.5 on os x (snow leopard)” last year
David said “Modernizer on Safari 4 Mac...” last year
Vaibhav said “Webkit Adaptation.” last year
Yngve said “Ubuntu 64bit” last year
Lars said “A few things missed” last year
Ralph said “Tested on Mac” last year
Paul said “on Modernizr..” last year
David said “Thanks for all the great responses” last year
Joel said “"all be it" vs albeit” last year
Raju said “Exactly what we need for HTML5/CSS3 adoption!” last year
Raju said “Safari4 OS X - @font-face supported!” last year
Ryan said “Geolocation, Transitions” last year
James said “Linux browsers” last year
Nick said “IE info...” last year
Ted said “One Comprehensive Chart?” last year
Antony said “Alas!...Still no dice” last year
James John said “Webkit not *that* far ahead of Gecko...” last year
D. Anne said “j j malcolm” last year
lucideer said “Useful for deployment, but very biased test in comparing support” last year
David said “Thanks for the points” last year
Fredrik said “FindMeByIP - encoding issues” last year
lucideer said “Thanks for the great response to comments” last year
Tim said “Chrome @font-face support” last year
lucideer said “Another issue with Modernizr” last year
David said “Very true - thanks for pointing it out” last year
lucideer said “Thanks for reply...” last year
James John said “Uhm” a few months ago
Jim said “OT: Email Links Fixed (Sorry!)” a few months ago
D Bnonn said “@font-face support is broken in Safari” a few months ago
lucideer said “Only two browsers out there?” a few months ago
Martin said “Web Database” a few months ago
Martin said “Opera 10.5” a few months ago
Martin said “:checked” a few months ago
David said “@Martin” a few months ago
Lars said “Quality” a few months ago
Angry Bastard said “This is pure Bullshit” a few months ago
Tekk said “Printing the list..” a few months ago
David said “Responses” a few months ago
Norman said “Update to Firefox 3.6?” a few months ago
David said “Apologies” a few months ago
Martin said “Opera 10.5 is out” a few months ago
Conrad said “so here's the problem that I see” a few months ago
Martin said “Web Design Checklist” a few months ago
David said “@Martin” a few months ago
Jaycob said “IE9” a few months ago
Mathias said “Mistakes in the "HTML5 Video Codecs" section” a few months ago
christian said “IE9 beta” a few months ago
Stephen said “Audio/Video codecs wrong” a few months ago
Christian said “Video: OGG / H.264” a few months ago
Simon said “Audio codecs & Opera” a few months ago
Jim said “Audio/Video Codecs & IE9” a few months ago
Sam said “So awesome!” a few months ago
Jim said “Mobile & Linux” a few months ago
Tony said “Great checklist, but the audio/video sections are wrong” a few months ago
Eli Grey said “postMessage in IE8” a few months ago
Raphaelle said “box-sizing” a few months ago
Richard said “UnTagged” a few months ago
Marc said “Marc Nothrop” a few months ago
Michael said “Make first column clickable” a few months ago
GM said “About Codecs” a few months ago
June said “PostMessage Function” a few months ago
Kelly said “Video: Ogg” a few months ago
Christopher said “lots of missing app features?” a few months ago
Lewis said “Nice collection of info” a few months ago
Jim said “Codecs, IE9, Features...” a few months ago
S A Faruque said “Thanks” a few months ago
Israel Alberto said “Link images of Browsers” a few months ago
Pascal said “Wrong UA detection” a few months ago
Jason said “Browserscope” a few months ago
Nicolas said “Mismatch between codec and container” a few months ago
Dave said “Awesome service” a few months ago
Tux said “No Linux?” a few months ago
Roman said “today's chrome 5 supports now Geolocation APIs” earlier this year
Kazyah said “IE 9?” earlier this year
Jim said “Chrome 5 & IE9” earlier this year
Tschef said “Very nice list, small bug” earlier this year
Rafita said “Good idea!” earlier this year
David said “@Tschef” earlier this year
Louis said “A breath of fresh air.” last month
Nabeel said “The new tags dont work on Chrome 5” last month
Rick said “OS detection” last month
Michael said “Useful” last month
Zi Bin said “nice!” last month
lucideer said “Please update your site!” a few weeks ago
Jim said “Accuracy & Modernizr” a few weeks ago