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 feedbackin 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 solidimplementation 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.
Source : http://www.deepbluesky.com/blog/-/browser-support-for-css3-and-html5_72/
