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
Aktualizováno 23. 2. 2011 22:13
Hodnotit tedy budeme Internet Explorer 7, Internet Explorer 8, a Internet Explorer 9 RC, Firefox 3.0, Firefox 3.5, Opera 9.6, 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 | IE9 | FF 3.0 | FF 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
