Demos » Browser Support Checklist CSS3
Effective 07.02.2012
| Browser Rendering Engine |
 Firefox Gecko |
 Safari Webkit |
 Chrome Webkit |
 Internet Explorer Trident |
 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 Gecko |
Safari Webkit |
Chrome Webkit |
Internet Explorer Trident |
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 | |
« Back to Demos Found a mistake? Report it! by–sa 2012 Norman Paschke
Siti Internet Roma says: 12.03.2010
Good Job!!! Really interesting!!!
Random Links #151 | YASDW - yet another software developer weblog says: 14.03.2010
[...] CSS3 Browser Support Checklist 2.9 % CSS3 support for IE8 … [...]
Jean Ximenes says: 19.03.2010
Very Cool, congratulations to Safari, Chrome (webkit) and Opera (presto) by 100% at Acid test!
The best browsers!!!
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 -.-
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.
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.
tiny update… | the fancy part of the web - tolleiv.de says: 08.05.2010
[...] CSS3 browser compatibility checklist [...]
admin says: 10.05.2010
Very very good article, Chrome 4 is a good browser.
現在リリースされているブラウザのCSS3対応状況 - BlackFlag – Web Development Technical says: 08.10.2010
[...] ≫Browser Support Checklist CSS3 – Norman's Blog – Demos [...]
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.
Norman says: 16.11.2010
hey kralynx,
you are right. I’ll post those stats, soon. Been busy with other things lately
EDIT: done
Browser Support Checklist says: 26.11.2010
[...] Die Liste findet ihr hier. [...]
mec says: 11.12.2010
very nice, thankx !
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
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! [...]
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/ [...]
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
Norman says: 17.04.2011
Yes, it does support transforms, you have to use the
-msprefixCreating 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 [...]
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: [...]
Jenny says: 17.06.2011
Very cool. Thanks for your work.
Bene says: 18.06.2011
Gute Arbeit und auch noch aktuell, weiter so!
Alexey says: 20.06.2011
Cool!
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!?
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.
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. [...]
[CSS3] 다단 기능 column-count : 현재 파폭,크롬,사파리 지원 says: 07.08.2011
[...] Browser Support Checklist CSS3 [...]
Danielle says: 11.08.2011
Thanks for the info… very helpful!
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.
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
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 /* */ [...]
dirtdiver2010 says: 21.10.2011
Danke für die Arbeit. Schön Übersichtlich, gerade auch wenn man sich in die Materie einfinden will.
IE9以下でもMedia Queriesを使う覚書 | 極楽ひだまり保育園・・・猫になりたい says: 25.10.2011
[...] Browser Support Checklist CSS3 [...]
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.
Peter says: 14.11.2011
Thanks for keeping this great resource up to date!
norman says: 16.11.2011
Better we can ban IE
Dryusdan says: 18.11.2011
Vive Steve job, aucune fautes sur Safarie
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/ [...]
Rob says: 13.02.2012
Very helpful! Thanks
Clement says: 24.02.2012
Very helpfull job !! Thank you
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 [...]
Browser Support Checklist CSS3 – Norman’s Blog – Demos » Web Design says: 05.04.2012
[...] Browser Support Checklist CSS3 – Norman’s Blog – Demos [...]
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. [...]
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.