CSS3 selektory: Jaká je podpora prohlížečů?

V tomto článku se zaměříme na podporu CSS selektorů ze specifikace CSS3 v prohlížečích, které mají relevantní podíl na trhu. Výsledky jsem získali z testu na stránkách CSS3.info.

Kategorie článku: Internet Explorer, Firefox, Google Chrome, Opera, Safari, Webové standardy a CSS3

27. 12. 2008 17:09
Aktualizováno 23. 2. 2011 22:13

Hodnotit tedy budeme Internet Explorer 7, Internet Explorer 8, a Internet Explorer 9 RCFirefox 3.0, Firefox 3.5, Opera 9.6Safari 3.2 a Google Chrome 1.0. Navíc ještě budeme hodnotit Internet Explorer 6, s kterým musí webový vývojáři stále počítat.

Tabulka je vytvořena podle testu na CSS3.info, který ale nezahrnuje selektory :hover, :focus, :active, :selection. Zde je nutno říct, že Inernet Explorer 6 má problém se všemi. Internet Explorer 7 nepodporuje :focus. Jak jsou prohlížeče na tom se selektorem :selection, se mi nepodařilo zjistit.

Vysvětlivky:

  • A = ANO podporuje, N = NE nepodporuje, CH = podporuje, ale obsahuje chyby.
  • IE = Internet Explorer, FF = Firefox.
  • E = element (např. div, span, body, h1,...)
CSS selektorIE6IE7IE8IE9FF 3.0FF 3.5+Opera 9.6+Safari 3+Google Chrome
* A A A A A A A A A
E A A A A A A A A A
.class CH A A A A A A A A
#id A A A A A A A A A
E F A A A A A A A A A
E > F N A A A A A A A A
E + F N A A A A A A A A
E[atribut] N CH CH A A A A A A
E[atribut=hodnota] N A A A A A A A A
E[atribut~=hodnota] N CH A A A A A A A
E[atribut|=hodnota] N CH A A A A A A A
:first-child N CH A A A A A A A
:link A A A A A A A A A
:visited A A A A A A A A A
:lang() N N A A A A A A A
:before N N A A A A A A A
::before N N N A A A A A A
:after N N A A A A A A A
::after N N N A A A A A A
:first-letter A A A A A A A A A
::first-letter A N N A A A A A A
:first-line A A A A A A A A A
::first-line A N N A A A A A A
E[atribut^=hodnota] N N A A A A A A A
E[atribut$=hodnota] N N A A A A A A A
E[atribut*=hodnota] N N A A A A A A A
E ~ F N A A A A A A A A
:root N N N A A A A A A
:last-child N N N A A A A A A
:only-child N N N A A A A A A
:nth-child() N N N A N A A A A
:nth-last-child() N N N A N A A A A
:first-of-type N N N A N A A A A
:last-of-type N N N A N A A A A
:only-of-type N N N A N A A A A
:nth-of-type() N N N A N A A A A
:nth-last-of-type() N N N A N A A A A
:empty N N N A A A A A A
:not() N N N A A A A A A
:target N N N A A A A A A
:enabled N N N A A A A A A
:disabled N N N A A A A A A
:checked N N N A A A A A A

V následující tabulce naleznete celkové výsledky:

ProhlížečPočet podporovaných selektorůProcenta
Opera 9.6+ 43 z 43 100%
Firefox 3.5+ 43 z 43 100%
Safari 3+ 43 z 43 100%
Google Chrome 43 z 43 100%
Internet Explorer 9 43 z 43 100%
Firefox 3.0 36 z 43 83.7%
Internet Explorer 8 23 z 43 (z toho 1 obsahuje chyby) 52.8%
Internet Explorer 7 17 z 43 (z toho 4 obsahují chyby) 38.3%
Internet Explorer 6 11 z 43 (z toho 1 obsahuje chyby) 25.2%

Test si můžete ve svém prohlížeči vyzkoušet na stránce http://www.css3.info/selectors-test/test.html.

Jan Mikula

* povinné položky

Zatím žádný komentář.

Přidejte vlastní názor
* povinné položky
Export komentářů v článku (RSS)