Exactly how much CSS3 does your browser support?

Posted on by Lea Verou
Tweet

This project started as an attempt to improve dabblet and to generate data for the book chapter I’m writing for Smashing Book #3. I wanted to create a very simple/basic testsuite for CSS3 stuff so that you could hover on a e.g. CSS3 property and you got a nice browser support popup. While I didn’t achieve that (turns out BrowserScope doesn’t do that kind of thing), I still think it’s interesting as a spin-off project, especially since the results will probably surprise you.

How it works

css3test (very superficially) tests pretty much everything in the specs mentioned on the sidebar (not just the popular widely implemented stuff). You can click on every feature to expand it and see the exact the testcases run and whether they passed. It only checks what syntax the browser recognizes, which doesn’t necessarily mean it will work correctly when used. WebKit is especially notorious for cheating in tests like this, recognizing stuff it doesn’t understand, like the values “round” and “space” for background-repeat, but the cheating isn’t big enough to seriously compromise the test.

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.

Only stuff that’s in a W3C specification is tested. So, please don’t ask or send pull requests for proprietary things like -webkit-gradient() or -webkit-background-clip: text; or -webkit-box-reflect and so on.

Every feature contributes the same to the end score, as well as to the score of the individual spec, regardless of the number of tests it has.

Crazy shit

Chrome may display slightly different scores (1% difference) across pageloads. It seems that for some reason, it fails the tests for border-image completely on some pageloads, which doesn’t make any sense. Whoever wants to investigate, I’d be grateful.
Edit: Fixed (someone found and submitted an even crazier workaround.).

Browserscope

This is the first project of mine in which I’ve used browserscope. This means that your results will be sent over to its servers and aggreggated. When I have enough data, I’m gonna built a nice table for everyone to see 🙂 In the meantime, check the results page.

It doesn’t work on my browser, U SUCK!

The test won’t work on dinosaur browsers like IE8, but who cares measuring their CSS3 support anyway? “For a laugh” isn’t a good enough answer to warrant the time needed.

If you find a bug, please remember you didn’t pay a dime for this before nagging. Politely report it on Github, or even better, fix it and send a pull request.

Why did you build it?

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.

Current results

At the time of this writing, these are the results for the major modern browsers:

  • Chrome Canary, WebKit nightlies, Firefox Nightly: 64%
  • Chrome, IE10PP4: 63%
  • Firefox 10: 61%
  • Safari 5.1, iOS5 Safari: 60%
  • Opera 11.60: 56%
  • Firefox 9: 58%
  • Firefox 6-8: 57%
  • Firefox 5, Opera 11.1 - 11.5: 55%
  • Safari 5.0: 54%
  • Firefox 4: 49%
  • Safari 4: 47%
  • Opera 10: 45%
  • Firefox 3.6: 44%
  • IE9: 39%

Enjoy! css3test.com Fork css3test on Github Browserscope results

This entry was posted in Apps & scripts, Original and tagged browsers, CSS3, standards. Bookmark the permalink.
  • Christian Sonne

    64% In Firefox Nightly (Determined by passing 470 tests out of 735 total for 179 features)
     

    • Lea Verou

      Added, thanks!

  • François Robichet

    That’s nice but it will be nicer if there was a link or some text to explain some of those properties (e.g, what the fuck is “currentColor” ?).

    • Lea Verou

      There is a link to the specification. That narrows it down A LOT.

      • François Robichet

        I was going to delete my post, I didn’t saw them at first 🙁

  • Jordan Gray

    Not enough people have a “crazy shit” section in their release notes.

  • Pingback: ¿Sabes cuánto CSS3 soporta tu navegador web? | Gespadas()

  • Thomas

    I got 60% (365 of 735 tests) in Android 4.0.3 ICS Browser

  • Krystian Jarmicki

    53% in Dolphin Browser HD 7.3.0 on Android 2.3.4, 328/735 passed

  • Morteza Milani

    Error in tests.js:283

    “perspective-origin”: [“10px”, “top”, “top left”, “50% 100%”, “left 0%” “right 10px bottom 20px”]

    There should be a comma between “left 0%” and “right 10px”

  • Anonymous

    Very interesting stuff…
    Quick (personal) question. Where do you find time?????

  • Scott Vivian

    Wow, awesome tool! A couple of things:
    1. What exactly do browsers (Chrome and Firefox at least) not support of “background-position”?
    2. The percentage keeps jumping up and down (I think it’s because it starts with ~400 tests and jumps up to ~700.
    3. Any plans yo extend it to HTML5?

    (Also off-topic: that banner at the top of this page (lea.verou.me) is a little distracting, any chance you could add a close button?)

    • Lea Verou

      1. Click on it and you’ll see 😉
      2. Yup, that’s expected until the test finishes.
      3. No, there’s html5test.com for that 😉

      • Scott Vivian

        1. I already saw the list of values, but didn’t realize it was any different to CSS 2 syntax. Just checked the spec and tested…and you’re right of course 😀
        2. Still seems weird, surely you know how many tests there are before you do them all?
        3. Thanks, I’ve somehow never seen that before :/

  • Alan Lockwood

    What gets 100%?

    • Lea Verou

      A browser that supports all tested features. Doesn’t exist yet.

  • ANONYMOUs

    JavaScript browser tests, ecma stuff, json will also be cool fto look:)!

  • Ricardo Gomez

    Browser “Camino” gets 42%

  • Ricardo Gomez

    iPhone’s Safari gets a 59%

  • Rafał Chłodnicki

    I’m pretty sure Opera supports gradients in border-image shorthand. Why it fails in your test?

    • Lea Verou

      It seems to fail having a single image in border-image (with nothing else, e.g. border-image: url(foo.png); ) in general. Will file a bug now.

    • Lea Verou

      Filed, CORE-44315

      • Rafał Chłodnicki

        Thanks!

        border-radius implementation is not up to date, can’t deny that. 🙂

    • Anonymous

      Opera v11.61 shows gradients just fine.

      Don’t have anything readily available for a border-image test.

  • Stuart Powers

    Pretty cool tool, w

  • Anonymous

    This is a pretty slick app.

    I thought you should know though, the colorscheme you’re using makes for a lot of indistinguishable output for red/green colorblind folk.  Only after I swapped the color channels  - http://slice.sente.cc/~stu/tmpfiles/imgs/lyshhq/ - did the bars really make sense to myself.

    • Lea Verou

      Thanks!

      What would you suggest to make it better for colorblind folks? Red/green is pretty standard in tests. Maybe a switch to hue rotate colors? SVG filters will allow this super easily, and they’re coming to CSS soon 😉

      • Anonymous

        The easiest dirty trick to test for color blindness - is to pull a combination of colors into a photo editor (read Photoshop or something similar) and Desaturate the Color.

        If you look at Green and Red in black and white tones - they look nearly identical.

        Just play with color combinations that have a high contrast relative to each other and you’ll be fine.

        A light color for one and a dark color for the other.

      • Anonymous

        In addition to what uberfu said, adding some form of mouseover/hover effect on each bar would potentially help.   And believe me I know red/green are pretty standard for these things 🙂

  • Beben Koben

    my mind 58%..zzz…-____-‘ so bad :Dty for resource 🙂

    • Beben Koben

      here for tested modernizr test suite
      http://www.thecssninja.com/demo/console/test/index.html

  • Draeli

    Firefox 11 (Aurora) 60%
    Determined by passing 406 tests out of 764 total for 183 features

  • Nikata Che

    Here is my browsers’ score:

    Chrome:62%firefox:60%Avant browser with chrome engine:62%Avant browser with firefox engine:60%IE8 cannot test the page… OOOOPS

  • Abc

    Firefox 64% . chrome 60%

  • Pingback: Новый CSS3 Тестер | Css-live - Сверстай свой мир!()

  • Pingback: Weekend Reading №4 (2-3-2011) « CSS Tips()

  • Guest

    64%
    Determined by passing 495 tests out of 764 total for 183 features

    Firefox 13.0a1

  • Pingback: Introducing the CSS3 Test - CSS3 . Info()

  • Pingback: Web Design Weekly #30 | Web Design Weekly()

  • fjpoblam

    I thank you for the test, but I whine at the results. CSS3 is so much fun to play with (well, er, to read about) and surely would save a bunch of design bandwidth.

  • fjpoblam

    [P.S. I don’t know whether the test is fully accurate.] I’ve filed a bug report, and others have noticed a similar behavior too, at Bugzilla. It occurs in the current Webkit nightly and in the current Chrome. An SVG background, with background-size: 100% 100% doesn’t get rendered properly. This is a low-priority bug, and the webkit developers aren’t sure when the “regression” occurred. This might lead one to wonder as to the accuracy of the CSS3 test.

    • Lea Verou

      This is by no means deep testing of these specs. Please note the notice at the top: “Caution: This test checks which CSS3 features the browser recognizes, not whether they are implemented correctly.”. If you want deep testing, I’d advise you to look into the W3C testsuites.

  • Carol

    Chrome got a 0% 

    • Lea Verou

      No it doesn’t. Thousands have run it in Chrome, you’re the first one that says so. I just ran it again, 60% as expected.

      • Mehran

        I get 0% too, and also my other browser get lesser than what is mentioned in this essay Firefox 11: 52%  / Opera 50% / Safari 49%

        It doesn’t seem right!

  • Pingback: The state of CSS3 support on Android devices « Netlight on Web()

  • Br

    Firefox 10.0.1 gets 58%

  • Pingback: Revision 58: -webkit-CSS3, -webkit-SEO und -webkit-MMT | Working Draft()

  • KreativTheme

    Thanks a lot for another great tool … I already mentioned CSS3 Test on my website … 😉 

  • Chuck Neely

    Excellent work, somehow this passed me by. It would be great to see “font-feature-settings” being tested for too

  • Pingback: Using JavaScript to detect CSS Support | Skateside Online()

  • Alexander Isaac Palma Larraín

    I personally think support using prefixes should not be counted towards the results. I absolutely hate having to write a thousand identical lines of code just to please the idiotic -webkit- or -moz- kind of thing.

  • Pingback: cartier just en clou fake()

  • Pingback: angara fahise()

  • Pingback: matka()

  • Pingback: http://www.tradeonixbonuses.com/review/()

  • Pingback: Oven Cleaning()

  • Pingback: Term Life Insurance()

  • Pingback: buy muscle building steroids()

  • Pingback: airport transportation()

  • Pingback: how do you get anabolic steroids()

  • Pingback: blogspot.com()