Released on the 2nd February, the CSS3 Test, created by web standards aficionado Lea Verou, offers a quick and easy way to test and compare browser support for CSS3.
In a blog post accompanying the release of the test, Lea Verou outlines her motivation for building the test as follows:
To motivate browsers to support the less hyped stuff, because I’m tired of seeing the same things being evangelized over and over. There’s much more to CSS3.
Keep reading to see how current release versions of the most popular web browsers shape up.
What does the test include?
According to the author, the test checks for support of “pretty much everything” in the following CSS3 modules, including some of the less widely implemented functionality, such as the
- Backgrounds and Borders
- Image Values and Replaced Content
- Media Queries
- Basic User Interface
- 2D Transforms
- 3D Transforms
- Multi-column Layout
- Values and Units
The test also recognises those CSS3 properties which have been implemented with a vendor prefix (such as
-moz-). According to the documentation:
Whether a feature is supported with a prefix or not doesn’t matter for the result. If it’s supported without a prefix, it will test that one. If it’s supported only with a prefix, it will test the prefixed one. For properties especially, if an unprefixed one is supported, it will be used in all the tests.
Every feature tested contributes the same to the end score, represented as a percentage, regardless of the number of tests it has.
Limitations of the test
The major limitation of the test is that it only checks whether or not a browser recognises the syntax of a particular feature, not whether or not the feature has been implemented in line with the W3C specification, or even implemented at all. WebKit, for example, will recognise the values
background-repeatand subsequently pass the test for those features, even though it doesn’t yet understand or process these values. The author though feels that there are not a significant number of such cases to seriously compromise the test.
The test also won’t work on some older browsers, such as IE8.
What do the results say?
The table below shows how the current release versions of the major browsers shape up (tested on a Windows PC). Chrome appears to offer the most comprehensive CSS3 support to date, scoring 62% across all tests, with Firefox close on its heels, scoring 60%. At the bottom of the table, as you may expect, Internet Explorer lags significantly behind the competition scoring only 39%, although that could all be about to change, with the IE10 platform preview scoring much higher at 62%, gaining significant ground of the competition. Chrome Canary and recently nightly builds of WebKit and Firefox all scored slightly higher at 64%.
Test results for common browsers:
Browser Version Overall Score Chrome 16.0.912 62% Firefox 10.0 60% Safari 5.1.2 59% Opera 11.61 56% Internet Explorer 9.0 39%
Give the test a try yourself at http://css3test.com.
More information on the test can be found in a blog post accompanying the release here.
The code for the test is also available on GitHub here.
You can skip to the end and leave a response.
Thank you for sharing!
Great news, the test release is here. All the features sound very appealing, useful and should boost creativity. There doesn’t seem to be many limitations, although, that brings me to my question… My question is when should we expect a complete release?
@Kenneth – No WebKit supports more CSS3 stuff not Chrome.
I have just tested latest Firefox 14.0a1 and Chrome 19.0.1055.1. Firefox scores 55% whilst Chrome scores 56%. The scores are pretty much spread with each browser having it’s own strong points. Firefox scores 100% for animations and transitions. Chrome scores highest for transforms but most sections they are pretty evenly matched.
The international LiZhiZhong before some deep feelings: “from Ukraine the goal is not sure, can see the original bottom line referee is also very not by the spectrum. Now, the bottom line of customized nba jerseys the solution is not put in the World
Chrome 26.0.1410.43 = 65%;
Firefox 20 = 57%;
IE 10 Beta (Windows 7) = 54%;
IE 10 for Windos Phone 8 = 54%
When I arrive at home, I’ll test with IE 10 for Windows 8 and Firefox Nightly. Since the results with W7 and WP8 are the same, I guess it’ll be the same at W8.