Current CSS3, HTML5 Support

The Tool

Last week saw the launch of FindMeByIp.com, a very handy web site that displays a user’s current IP address (along with a geographic breakdown to city, if possible), user agent string (browser, version and operating system) and support for CSS3 and HTML5 (read the article about it). It accomplishes this last bit by using the Modernizr JavaScript library to test a series of features in your browser:

• @font-face
• Canvas
• Canvas Text
• HTML5 Audio
• HTML5 Video
• rgba()
• hsla()
• border-image
• border-radius
• box-shadow
• Multiple backgrounds
• opacity
• CSS Animations
• CSS Columns
• CSS Gradients
• CSS Reflections
• CSS 2D Transforms
• CSS 3D Transforms
• CSS Transitions
• Geolocation API

If you are running the Google Chrome for Internet Explorer plug-in, it will show up in your browser user agent string on this page. However, it will also report your Internet Explorer browser as Chrome.

The Results

The site developers ran their own browsers through this tool and that collection of information has been gathered up and posted to provide information on current browser support for the latest standards (or recommendations). Deep Blue Sky, one of the developers of this site, has written up the level of support in all the A-Grade browsers. Yahoo’s model outlines A-Grade browsers as “… identified, capable, modern and common” and claims “approximately 96% of our audience enjoys an A-grade experience.” This is their codified way of simply saying, “the latest common browsers.” If you read my post, Browser Performance Chart, then you’ll see the same browsers. The article, Browser support for CSS3 and HTML5, covers the following browsers (the author didn’t test against anything other than Windows versions):

• Safari 4 (Win)
• Firefox 3.5 (Win)
• Google Chrome (Win)
• Opera 10 (Win)
• Internet Explorer 6, 7 & 8

The surprise in here is that Safari 4 outshone (outshined? outshinerified?) the others with Google Chrome coming up close behind. Firefox 3.5 was missing some key CSS3 support and Opera 10 was surprisingly lacking in support. As expected, Internet Explorer brings up the rear, lacking in everything but @font-face support (even in IE8) which has actually been there since version 6 (but only for the .eot format).