-
201206 Feb
Posted in Browsers, CSS3 Resources, News
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
box-decoration-break
property:- Backgrounds and Borders
- Image Values and Replaced Content
- Selectors
- Media Queries
- Basic User Interface
- Transitions
- Animations
- 2D Transforms
- 3D Transforms
- Text
- Fonts
- Color
- Multi-column Layout
- Values and Units
The test also recognises those CSS3 properties which have been implemented with a vendor prefix (such as
-webkit-
or-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
round
andrepeat
forbackground-repeat
and 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.
Related Links
More information on the test can be found in a blog post accompanying the release here.
Results from the test are aggregated on Browserscope, the full results can be found here.
The code for the test is also available on GitHub here.
You can skip to the end and leave a response.
-
Comments
-
01.
Thank you for sharing!
-
02.
hohohoho any master Lea Verou here…xixixixi ^_+”
-
03.
Hmm… I think it actually doesn’t work well with the latest Opera Next. some of features are working well, but CSS3test shows differently (o.O ?).
-
04.
The stats from
Win7 – 64 bitFirefox 10.0.1 – 58%
Safari 5.0.3 – 51%
[ Chrome 17.0.963.46 – 60% ]
Opera 11.61 – 54% -
05.
-
06.
John says:Comment » February 15th, 2012 at 5:26 pm
Latest version of Chrome (170.0963.46) on 10.7.2 gets 60% here.
-
07.
Daerun says:Comment » February 19th, 2012 at 10:26 pm
Firefox 10.0.2 on Arch Linux 58%
Still an overall low performance for all browsers, IMO.
-
08.
-
09.
Thanks, it’s very cool tool for web developers …
The stats from Win7 – 32 bit
Chrome 17.0.963.56 – 59%
Firefox 10.0.2 – 58%
Safari 5.1.2 – 56%
Opera 11.61 – 54%
IE9 – 37%… and IE gets the “crown” again … :))
-
10.
Still on average support of all the browser. just for suggestion why all browser has to write separate code. why they not making universal so its easy to use.
-
11.
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?
-
12.
Thanks for the great post! As a matter of fact, I had a hunch (though never tested) that Chrome supports more CSS3 stuff. :)
-
13.
@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.
-
14.
-
15.
-
16.
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 -
17.
Hi there, i’ve published some examples, testing the graphic-possibilities of css3.
-
18.
-
19.
Not that we do not already know that IE is junk, but I wanted to be fair and review IE10 since IE9 is far older then the other browsers, but it gets a javascript error and refuses to even run lol. :D [Windows 7 IE10]
-
20.
I am currently running Firefox 20, any chance that the stats can be updated?
Chrome 17.0.963.56 – 59%
Firefox 10.0.2 – 58%
Safari 5.1.2 – 56%
Opera 11.61 – 54%
IE9 – 37% -
21.
RiftZone design says:Comment » April 3rd, 2013 at 10:33 pm
I just tested IE 10.0.9200.16521 and it tested 54% how come your results are so different?
-
22.
Same here!
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.
-
23.
-
24.
As one of the visitors asked
Please explain the -
25.
-
26.
-
01.