Demos » Browser Support Checklist CSS3

Share / Comment

Effective 07.02.2012

Browser
Rendering Engine
Firefox
Firefox

Gecko
Safari
Safari

Webkit
Chrome
Chrome

Webkit
Internet Explorer
Internet Explorer

Trident
Opera
Opera

Presto
Version 3.6 5 6 7 – 9 10+ 4 5 5.1+ 12 – 14 15 – 17 6 – 8 9 10b 11.0 11.1 11.6
Total CSS3 Support * 69.4% 80.6% 86.1% 91.7% 97.2% 83.4% 88.9% 97.2% 88.9% 91.7% 8.3% 55.6% 94.4% 72.2% 80.6% 83.3%
Animations N Y Y Y Y Y Y Y Y Y N N Y N N N
Background Gradients Y Y Y Y Y Y Y Y Y Y N N Y N Y/N Y
Background Size Y Y Y Y Y Y/N Y Y Y Y N Y Y Y Y Y
Border Image Y Y Y Y Y Y Y Y Y Y N N N Y Y Y
Border Radius Y/N Y/N Y/N Y/N Y/N Y/N Y/N Y/N Y/N Y/N N Y Y Y Y Y
Box Shadow Y Y Y Y Y Y/N Y Y Y Y N Y Y Y Y Y
Columns Y Y Y Y Y Y Y Y Y Y N N Y N Y Y
Font Face Y Y Y Y Y Y Y Y Y Y Y/N Y Y Y Y Y
HSLa Y Y Y Y Y Y Y Y Y Y N Y Y Y Y Y
Hyphens N N Y Y Y N N Y N N N N Y N N N
Multiple Backgrounds Y Y Y Y Y Y Y Y Y Y N Y Y Y Y Y
Opacity Y Y Y Y Y Y Y Y Y Y N Y Y Y Y Y
RGBa Y Y Y Y Y Y/N Y/N Y Y/N Y N Y Y Y Y Y
Text Overflow N N N Y Y Y Y Y Y Y Y Y Y Y Y Y
Text Shadow Y Y Y Y Y Y Y Y Y Y N N Y Y Y Y
Transforms Y Y Y Y Y Y Y Y Y Y N Y Y Y Y Y
Transforms 3D N N N N Y Y Y Y Y Y N N Y N N N
Transitions N Y Y Y Y Y Y Y Y Y N N Y Y Y Y

* This table does in no way reflect the full CSS3 specification, it rather gives an overview about todays browser support for visual features that become more and more important in modern webdesign.

Browser Support Checklist Acid2 & Acid3

Browser
Rendering Engine
Firefox
Firefox

Gecko
Safari
Safari

Webkit
Chrome
Chrome

Webkit
Internet Explorer
Internet Explorer

Trident
Opera
Opera

Presto
Version 3.6 4+ 4+ 4+ 6 – 7 8 9+ 10+
Acid2 Y Y Y Y N Y Y Y
Acid3
Score
N99/100 Y100/100 Y100/100 Y100/100 N≤14/100 N24/100 Y100/100 Y100/100

44 Comments on “Browser Support Checklist CSS3”

Trackback URLRSS Comments

  1. Siti Internet Roma says: 12.03.2010

    Good Job!!! Really interesting!!!

    Reply

  2. Random Links #151 | YASDW - yet another software developer weblog says: 14.03.2010

    [...] CSS3 Browser Support Checklist 2.9 % CSS3 support for IE8 … [...]

    Reply

  3. Jean Ximenes says: 19.03.2010

    Very Cool, congratulations to Safari, Chrome (webkit) and Opera (presto) by 100% at Acid test!
    The best browsers!!!

    Reply

  4. Drazen Mokic says: 25.03.2010

    Very nice overview, thanks. Even with 9a IE still sucks compared to the other browsers, it`s a shame -.-

    Reply

    • Norman says: 25.03.2010

      Well, IE9 is in an very early phase of development. I’m pretty sure that Microsoft will add more CSS3 features and continue to improve its performance in Acid3.

      Reply

  5. Norman says: 25.03.2010

    Update: For your interest, I removed Firefox 2 from the statistic since its no longer supported. Also, I took IE6, 7 and 8 together since they have exactly the same CSS3 support.

    Reply

  6. tiny update… | the fancy part of the web - tolleiv.de says: 08.05.2010

    [...] CSS3 browser compatibility checklist [...]

    Reply

  7. admin says: 10.05.2010

    Very very good article, Chrome 4 is a good browser.

    Reply

  8. 現在リリースされているブラウザのCSS3対応状況 - BlackFlag – Web Development Technical says: 08.10.2010

    [...] ≫Browser Support Checklist CSS3 – Norman's Blog – Demos [...]

    Reply

  9. kralynx says: 14.11.2010

    I would like to see the css3 support of the latest versions in a second table.

    And I’m interested in the future of Opera, the Alpha of Opera 11 is out for a while.

    Reply

    • Norman says: 16.11.2010

      hey kralynx,
      you are right. I’ll post those stats, soon. Been busy with other things lately
      EDIT: done ;)

      Reply

  10. Browser Support Checklist says: 26.11.2010

    [...] Die Liste findet ihr hier. [...]

    Reply

  11. mec says: 11.12.2010

    very nice, thankx !

    Reply

  12. Patrik says: 15.03.2011

    Nice!
    I would like to see another list or a possibility to extend this list so all css properties can be viewed :)

    Reply

  13. Playing around with HTML5 & CSS3 « Natashamrtn's Blog says: 25.03.2011

    [...] CSS3 Checklist A browser support checklist providing an overview of the different browsers and their compatibility with CSS3 features. html5Test.com Determines what browser you’re using and ‘scores’ it based on how many HTML5 features are supported. It gives you a breakdown of each feature and your browser’s level of support. It has a tab for viewing how other browsers rank as well. CanIUse.com Covers both HTML5 and CSS3 and provides a customizable filter to target compatibility info on specific features in specific browsers – you can even specify previous/current/future versions of each browser! [...]

    Reply

  14. Styr layouten med stilmallar | Interaktiva medier I says: 15.04.2011

    [...] Prova gärna på att använda de nya funktioner som finns men säkerställ att sajten ändå fungerar i webbläsare som inte har stöd för CSS3. Det behöver inte se likadant ut överallt. De senaste versionerna av de stora webbläsarna stöder CSS3 till stor del. I Norman’s Blog hittade jag en sammanställning i tabellform över webbläsarnas stöd för olika CSS3-funktioner: http://www.normansblog.de/demos/browser-support-checklist-css3/ [...]

    Reply

  15. Caballero says: 17.04.2011

    Correction: IE9 does not support transform, just checked it myself, http://www.w3schools.com/css3/tryit.asp?filename=trycss3_image_gallery

    Reply

  16. Creating A Rocking CSS3 Search Field says: 06.05.2011

    [...] not all browsers support CSS3 features and to trying out this tutorial, you should use one of the modern browsers that support CSS 3 [...]

    Reply

  17. pcany webdesign » CSS3 Animations says: 08.05.2011

    [...] Überblick über die Browserunterstützung für CSS3 Funktionen gibt es hier: http://www.normansblog.de/demos/browser-support-checklist-css3/. Etwas ausführlicher in diesen Tabellen: [...]

    Reply

  18. Jenny says: 17.06.2011

    Very cool. Thanks for your work.

    Reply

  19. Bene says: 18.06.2011

    Gute Arbeit und auch noch aktuell, weiter so!

    Reply

  20. Alexey says: 20.06.2011

    Cool!

    Reply

  21. Sebastian says: 05.07.2011

    Firefox will den Acid3 test gar nicht richtig bestehen, wie ich mal gelesen habe. Die 100% wären so banal, dass es sich nicht lohnt, dafür zu optimieren!?

    Reply

    • Norman says: 07.07.2011

      ja, völlig richtig. Mozilla hat sich entschieden den Acid3-Test nicht bestehen zu wollen. D.h. nicht, dass das niemals passieren wird, es hat einfach nur absolut keine Priorität. Den genauen Grund kannst du auf Alexander Limis Blog lesen.

      Reply

  22. JavaScript, Animationen und CSS3 | picomol.de says: 27.07.2011

    [...] Voraussetzung dafür natürlich: Unterstützung der CSS-Elemente durch den Browser. Sehr weit fortgeschritten in der Entwicklung sind die Webkit-Browser Safari und Chrome, gefolgt von Firefox und Opera. Mit Version 9 hat auch der Internet Explorer etwas an Boden auf die Konkurrenz gut gemacht. Eine Übersicht über unterstützte bzw. nicht unterstützte CSS3-Funktionen in den wichtigsten Browsern findet sich auf Normans Blog. [...]

    Reply

  23. Danielle says: 11.08.2011

    Thanks for the info… very helpful!

    Reply

  24. Michael says: 23.09.2011

    Gute Seite, danke!
    Ich bin grad dabei die neuen CSS-Funktionen zu lernen. Hätte also sehr gerne gesehen, wenn die CSS-Befehle direkt auf einen Tutorial, selfhtml o.Ä. verlinkt wären.

    Reply

    • Norman says: 24.09.2011

      Sehr gute Idee Michael! Ich hab mal ein paar Sachen verlinkt, über die ich schon was auf meinem Blog geschrieben habe und versuche das noch zu vervollständigen. Viel Erfolg bei deinen Tests :)

      Reply

  25. CSS3 browser support | Eli's says: 03.10.2011

    [...] Link: http://www.normansblog.de/demos/browser-support-checklist-css3/ Uncategorized ← Above All — Great free Chillout Mix /* */ [...]

    Reply

  26. dirtdiver2010 says: 21.10.2011

    Danke für die Arbeit. Schön Übersichtlich, gerade auch wenn man sich in die Materie einfinden will.

    Reply

  27. Sören Hentzschel says: 29.10.2011

    Hey Norman,

    bin grad durch Zufall zum ersten mal auf deiner Checkliste hier gelandet. Die ist mal richtig cool, so detailliert und aktuell. Hut ab, sehr gute Arbeit! Direkt in meinen Lesezeichen gelandet. :)

    Reply

  28. Peter says: 14.11.2011

    Thanks for keeping this great resource up to date!

    Reply

  29. norman says: 16.11.2011

    Better we can ban IE :)

    Reply

  30. Dryusdan says: 18.11.2011

    Vive Steve job, aucune fautes sur Safarie

    Reply

  31. Styr utseendet med stilmallar | Interaktiva medier I says: 21.11.2011

    [...] Prova gärna på att använda de nya funktioner som finns men säkerställ att sajten ändå fungerar i webbläsare som inte har stöd för CSS3. Det behöver inte se likadant ut överallt. De senaste versionerna av de stora webbläsarna stöder CSS3 till stor del. I Norman’s Blog hittade jag en sammanställning i tabellform över webbläsarnas stöd för olika CSS3-funktioner: http://www.normansblog.de/demos/browser-support-checklist-css3/ [...]

    Reply

  32. Rob says: 13.02.2012

    Very helpful! Thanks

    Reply

  33. Clement says: 24.02.2012

    Very helpfull job !! Thank you

    Reply

  34. Site d’aide à la réalisation wordPress « pokypoipoi says: 04.04.2012

    [...] de compatibilité des fonctionnalités de css pour les naviguateur : Accéder ou Accéder Share this:TwitterFacebookJ'aimeJ'aime  Comments RSS [...]

    Reply

  35. Browser Support Checklist CSS3 – Norman’s Blog – Demos » Web Design says: 05.04.2012

    [...] Browser Support Checklist CSS3 – Norman’s Blog – Demos [...]

    Reply

  36. Transparente Hintergründe für das Web | Hurm IT Webdesign Blog says: 08.04.2012

    [...] RGBa Die dritte und zugleich jüngste Methode eröffnete sich durch den neuen CSS3 Standard. Dieser Ansatz gibt uns die Möglichkeit bei jeder Farbe(RGB) die wir irgendwo Einsetzen gleich die Transparenz(a) mit anzugeben. Daher auch der Name RGBa: Reg Green Blue alpha. So wird beispielsweise durch den Befehl background: rgba(255, 255, 255, .5) nicht nur die Farbe des entsprechenden Hintergrundelementes festgelegt sondern gleichzeitig auch noch die Deckkraft auf 50% (0.5) reduziert. Wie bereits erwähnt ist RGBa noch nicht all zu alt und somit ist davon auszugehen, dass nicht jeder Browser die Anweisungen korrekt interpretiert. Eine sehr schöne und gleichzeitig aktuelle Übersicht über die unterstützenden Browser findet ihr hier. [...]

    Reply

  37. Hugo says: 18.05.2012

    Hi !

    If no mistake, Firefox 3.6 doesn’t exist anymore since Mozilla decided to automatically update 3.6 to 12.

    I guess it’s the same deal with old Chrome versions since Google auto-update every Google Chrome user each time a new version is released.

    Great list anyway, thanks. :)

    Reply

Welcome !

Write a comment

« Back to Demos Found a mistake? Report it! by–sa 2012