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

V tomto článku se zaměříme na podporu CSS selektorů včetně těch ze specifikace CSS3 v dnešních prohlížečích. Kouknem se i na to, jak jsou na tom jejich aktuální vývojové verze. Výsledky jsem získali z testu na stránkách CSS3.info.

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

27. 12. 2008 17:09

Hodnotit tedy budeme Internet Explorer 7, Internet Explorer 8 beta 2, Firefox 3.0, Firefox 3.1 beta 2, Opera 9.6, Opera 10 alfa, Safari 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 selektor	IE6	IE7	IE8 beta 2	FF 3.0	FF 3.1 beta 2	Opera 9.6 i Opera 10 alfa	Safari 3.2	Google Chrome 1.0
*	A	A	A	A	A	A	A	A
E	A	A	A	A	A	A	A	A
.class	CH	A	A	A	A	A	A	A
#id	A	A	A	A	A	A	A	A
E F	A	A	A	A	A	A	A	A
E > F	N	A	A	A	A	A	A	A
E + F	N	A	A	A	A	A	A	A
E[atribut]	N	CH	CH	A	A	A	A	A
E[atribut=hodnota]	N	A	A	A	A	A	A	A
E[atribut~=hodnota]	N	CH	A	A	A	A	A	A
E[atribut\|=hodnota]	N	CH	A	A	A	A	A	A
:first-child	N	CH	A	A	A	A	A	A
:link	A	A	A	A	A	A	A	A
:visited	A	A	A	A	A	A	A	A
:lang()	N	N	A	A	A	A	A	A
:before	N	N	A	A	A	A	A	A
::before	N	N	N	A	A	A	A	A
:after	N	N	A	A	A	A	A	A
::after	N	N	N	A	A	A	A	A
:first-letter	A	A	A	A	A	A	A	A
::first-letter	A	N	N	A	A	A	A	A
:first-line	A	A	A	A	A	A	A	A
::first-line	A	N	N	A	A	A	A	A
E[atribut^=hodnota]	N	N	A	A	A	A	A	A
E[atribut$=hodnota]	N	N	A	A	A	A	A	A
E[atribut*=hodnota]	N	N	A	A	A	A	A	A
E ~ F	N	A	A	A	A	A	A	A
:root	N	N	N	A	A	A	A	A
:last-child	N	N	N	A	A	A	A	A
:only-child	N	N	N	A	A	A	A	A
:nth-child()	N	N	N	N	A	A	A	A
:nth-last-child()	N	N	N	N	A	A	A	A
:first-of-type	N	N	N	N	A	A	A	A
:last-of-type	N	N	N	N	A	A	A	A
:only-of-type	N	N	N	N	A	A	A	A
:nth-of-type()	N	N	N	N	A	A	A	A
:nth-last-of-type()	N	N	N	N	A	A	A	A
:empty	N	N	N	A	A	A	A	A
:not()	N	N	N	A	A	A	A	A
:target	N	N	N	A	A	A	A	A
:enabled	N	N	N	A	A	A	A	A
:disabled	N	N	N	A	A	A	A	A
:checked	N	N	N	A	A	A	A	A

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

Prohlížeč	Počet podporovaných selektorů	Procenta
Opera 9 a 10 alfa	43 z 43	100%
Firefox 3.1 beta 2	43 z 43	100%
Safari 3.2	43 z 43	100%
Google Chrome 1.0	43 z 43	100%
Firefox 3.0	36 z 43	83.7%
Internet Explorer 8 beta 2	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

Masivni-postele.cz - postele z masivu, zdravotní matrace, polohovací či motorové rošty, vestavěné skříně, jídelní stoly a další sortiment. Více na www.masivni-postele.cz.