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.
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.
