CSS3

  • 201206 Feb

    Introducing the CSS3 Test

    by

    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 and repeat for background-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

Subscribe to our RSS

OUR SPONSORS

Advertise here?
CATEGORIES
FRIENDS
META2
TAG CLOUD

© 2009-2012 WEBFLUX. All Rights Reserved.