Testowanie obsługi selektorów CSS w przeglądarkach

Opublikowano Październik 13, 2006, autor: Krzysztof Danek

W serwisie CSS3 Info zamieszczono zbiór testów napisanych w JavaScript przez Nielsa Leenheera. Pozwalają one określić, jakie selektory CSS obsługuje nasza przeglądarka.

Poniżej krótkie zestawienie dla przeglądarek, które udało mi się przetestować do tej pory.

Przeglądarka Selektory [1] Testy [2]
Internet Explorer 6.0 10 243
Internet Explorer 7.0 RC1 13 272
Opera 9.01 24 290
Safari 2.0.3 28 299
Firefox 1.5.0.5 36 315

[1] – ilość selektorów obsługiwanych ze wszystkich 43 badanych
[2] – ilość testów zaliczonych z 513 wszystkich testów

Jak widać Firefox 1.5 zdecydowanie prowadzi, co nie było dla mnie wielkim zaskoczeniem. Niestety, zmartwił mnie poziom obsługi oferowany przez najnowszą wersję IE…

Poniżej trochę bardziej szczegółowy rozkład:

Selektor IE6 IE7 Opera 9 Safari 2 Firefox 1.5
* tak tak tak tak tak
E tak tak tak tak tak
.class nie tak tak tak tak
#id tak tak tak tak tak
E F tak tak tak tak tak
E > F nie tak tak tak tak
E + F nie tak tak tak tak
E[attribute] nie nie tak tak tak
E[attribute=value] nie tak nie tak tak
E[attribute~=value] nie nie tak tak tak
E[attribute|=value] nie nie tak tak tak
:first-child nie nie tak tak tak
:link tak tak tak tak tak
:visited tak tak tak tak tak
:lang() nie nie nie nie tak
:before nie nie tak tak tak
::before nie nie tak tak tak
:after nie nie tak tak tak
::after nie nie tak tak tak
:first-letter tak tak tak tak tak
::first-letter tak nie tak tak tak
:first-line tak tak tak tak tak
::first-line tak nie tak tak tak
E[attribute^=value] nie nie nie tak tak
E[attribute$=value] nie nie nie tak tak
E[attribute*=value] nie nie tak tak tak
E ~ F nie tak tak nie tak
:root nie nie nie tak tak
:last-child nie nie nie nie tak
:only-child nie nie nie nie tak
:nth-child() nie nie nie nie nie
:nth-last-child() nie nie nie nie nie
:first-of-type nie nie nie nie nie
:last-of-type nie nie nie nie nie
:only-of-type nie nie nie nie nie
:nth-of-type() nie nie nie nie nie
:nth-last-of-type() nie nie nie nie nie
:empty nie nie nie nie tak
:not() nie nie nie tak tak
:target nie nie nie tak tak
:enabled nie nie tak nie tak
:disabled nie nie tak nie tak
:checked nie nie tak nie tak

Do powyższego zestawienia trzeba dodać pewien komentarz. Brak obsługi nie oznacza całkowitego braku wsparcia dla danego selektora w konkretnej przeglądarce. Oznacza to, że nie przeszedł on jednego lub kilku z kilkudziesięciu testów, sprawdzających szczególne przypadki zastosowania. Najlepiej samemu przeprowadzić testy i przeczytać szczegółowe komentarze przy każdym z nich.

Ten wpis został opublikowany w kategorii CSS i oznaczony tagami . Dodaj zakładkę do bezpośredniego odnośnika.

11 odpowiedzi na „Testowanie obsługi selektorów CSS w przeglądarkach”

  1. Riddle pisze:
    Październik 13, 2006 o 10:10 am

    Proponuję dodać klasę „supports” do komórek tabelki i pokolorować je na zielono – będzie widać co i jak.

  2. Krzysztof Danek pisze:
    Październik 13, 2006 o 10:37 am

    Tak też zrobiłem. Dzięki za uwagę.

  3. Siergiej pisze:
    Październik 14, 2006 o 10:26 pm

    Ale Opera 9 obsługuje :lang(). Tak mi z testów wychodzi.

  4. Krzysztof Danek pisze:
    Październik 16, 2006 o 8:04 am

    Opera nie przechodzi jednego z 11 testów. Dokładnie nie radzi sobie z następującą kombinacją:

    
:lang(en) {
}

<div lang='enUS'></div>

    The CSS selector should not match the element, because it does not match exactly. Because the hyphen is missing we are only allowed to do an exact match.

    Tak jak pisałem, tabela powyżej określa tylko pełne wsparcie danego selektora, wraz ze wszystkimi możliwościami zastosowania. Spójrz proszę na IE – wg tego zestawienia nie obsługuje nawet .class…

  5. Waldek Zajączkowski pisze:
    Październik 21, 2006 o 5:43 pm

    Świetna rzecz… takie zestawienie… na pewno skorzystam.. Przy okazji . pojawia się ciekawość w jaki sposób radzisz sobie z testami danej strony pod różnymi wersjami IE.. możesz coś polecić..??

  6. Krzysztof Danek pisze:
    Październik 23, 2006 o 8:36 am

    IE6 zainstalowane normalnie, IE7 w wersji standalone. Działającą wersję można pobrać ze strony TredoSoft.

  7. ludwik pisze:
    Listopad 4, 2006 o 7:34 pm

    faczone IE… nie obsługuje najfajniejszych i bardzo przydatnych selektorów jak np.
    E + F
    czy też:
    E > F

  8. Yano pisze:
    Listopad 7, 2006 o 4:31 am

    Z ciekawości sprawdziłem Konquerora na Kubuntu Edgy:
    From the 43 selectors 37 have passed, 6 are buggy and 0 are unsupported (Passed 570 out of 578 tests)

    Jestem pod wrażeniem :)

  9. m. pisze:
    Maj 13, 2007 o 3:55 pm

    A dla mnie prowadzenie Firefoxa było zaskoczeniem. Tym bardziej, że do niedawna nie wspierał on jeszcze w pełni CSS 2.1. Także gotowa wersja IE 7 wypada znacznie lepiej, niż w prezentowanej tabeli. W każdym razie testy warto zaktualizować. Oto najnowsze wyniki:

    Opera 9.20:

    From the 43 selectors 25 have passed, 3 are buggy and 15 are unsupported (Passed 346 out of 578 tests)

    Firefox 2.0.0.3:

    From the 43 selectors 24 have passed, 10 are buggy and 9 are unsupported (Passed 355 out of 578 tests)

    IE 7:

    From the 43 selectors 13 have passed, 4 are buggy and 26 are unsupported (Passed 330 out of 578 tests)

    Jak widać, z tej trójki Opera obsługuje najwięcej CSS….

  10. Konin pisze:
    Lipiec 29, 2007 o 11:01 am

    Trafiłem tu szukając informacji na ten właśnie temat. Tabela przyda mi sie z pewnością. Generalnie to nienawidzę braku zgodności jeżeli chodzi o css pomiędzy przeglądarkami. Na co dzień używam Firefoxa ale projektując strony muszę brać pod uwagę też użytkowników IE i Opery w reszcie nawet nie sprawdzam.

  11. sx pisze:
    Wrzesień 4, 2007 o 9:49 pm

    Uaktualnijcie wyniki. Oto aktualne:

    43 ok / 00 bad / 00 nn = Opera 9.50
    25 ok / 03 bad / 15 nn = Opera 9.23
    26 ok / 10 bad / 07 nn = Firefox 2.0.0.6
    10 ok / 01 bad / 32 nn = IE 6

    Opera 9.50
    From the 43 selectors 43 have passed, 0 are buggy and 0 are unsupported (Passed 578 out of 578 tests)

    Opera 9.23
    From the 43 selectors 25 have passed, 3 are buggy and 15 are unsupported (Passed 346 out of 578 tests)

    FF
    From the 43 selectors 26 have passed, 10 are buggy and 7 are unsupported (Passed 357 out of 578 tests)

    IE
    From the 43 selectors 10 have passed, 1 are buggy and 32 are unsupported (Passed 276 out of 578 tests)