256 sposobów, by klasą nadpisać ID
Okazuje się, że nie zawsze ID ma wyższą specyficzność od klasy w kodzie CSS. Przewrotne i obrazoburcze demo autorstwa Chrisa Coyiera niszczy cały CSSowy światopogląd wywracając go do góry nogami, a przynajmniej tak by to mogło wyglądać na pierwszy rzut oka. Chodzi o to, że 256 klas ma wyższą specyficzność (ważność w hierarchii CSS) od jednego ID, a przecież tak być nie powinno.
Teoretycznie, według tabeli specyficzności, ID jest ważniejszy (ma wyższą specyficzność) od klasy, a więc dla kontenera:
I poniższego kodu CSS:
Kontener będzie miał niebieskie tło - na razie wszystko się zgadza. Natomiast jeśli "trochę" (256 razy) przesadzimy z ilością klas w kontenerze:
Wtedy tło kontenera staje się... czerwone! Czary-mary? Zagięcie czasoprzestrzeni? Okazuje się, że rozwiązanie jest bardzo proste i przyziemne. Otóż informacja o specyficzności przetrzymywana jest w 8 bitowych ciągach znaków, a jak wiadomo w 8 bitach mieści się 255 danych informacji. Używając 256 klas ta zmienna jest przepełniana i nadpisuje specyficzność ID.
Co ciekawe, problem ten nie występuje w Operze - Ryan Seddon dostał odpowiedź od Patricka Lauke, który wyjaśnił, że Opera przetrzymuje informacje o specyficzności w 16 bitowych ciągach, a więc żeby wywołać podobny efekt w tej przeglądarce należałoby użyć... dokładnie 65 536 klas. W pozostałych przeglądarkach (Firefox, Chrome, Safari) wystarczy 256 klas, co potwierdził dla Firefoxa Cameron McCormack.
Czy jest się więc czym martwić? Ani trochę: jest to tak skrajny przypadek, że w realnym zastosowaniu nigdy nie powinien się pojawić. Jeśli w Twoim kodzie jeden element posiada 256 klas, to nie przeglądarka odpowiada za pojawiający się błąd, tylko Ty. Nie ma sensu naprawiać czegoś, co jest prawie niemożliwe do zreprodukowania a spowolniłoby mechanizmy aktualnie obliczające specyficzność, więc ten bug został oznaczony jako nierozwiązywalny. Mimo wszystko jest to dosyć interesująca ciekawostka.
Teoretycznie, według tabeli specyficzności, ID jest ważniejszy (ma wyższą specyficzność) od klasy, a więc dla kontenera:
<div id="identyfikator" class="klasa"></div>
I poniższego kodu CSS:
#identyfikator {
background: blue;
}
.klasa {
background: red;
}
Kontener będzie miał niebieskie tło - na razie wszystko się zgadza. Natomiast jeśli "trochę" (256 razy) przesadzimy z ilością klas w kontenerze:
<div id="identyfikator" class="klasa000 klasa001 ... klasa255"></div>
Wtedy tło kontenera staje się... czerwone! Czary-mary? Zagięcie czasoprzestrzeni? Okazuje się, że rozwiązanie jest bardzo proste i przyziemne. Otóż informacja o specyficzności przetrzymywana jest w 8 bitowych ciągach znaków, a jak wiadomo w 8 bitach mieści się 255 danych informacji. Używając 256 klas ta zmienna jest przepełniana i nadpisuje specyficzność ID.
Co ciekawe, problem ten nie występuje w Operze - Ryan Seddon dostał odpowiedź od Patricka Lauke, który wyjaśnił, że Opera przetrzymuje informacje o specyficzności w 16 bitowych ciągach, a więc żeby wywołać podobny efekt w tej przeglądarce należałoby użyć... dokładnie 65 536 klas. W pozostałych przeglądarkach (Firefox, Chrome, Safari) wystarczy 256 klas, co potwierdził dla Firefoxa Cameron McCormack.
Czy jest się więc czym martwić? Ani trochę: jest to tak skrajny przypadek, że w realnym zastosowaniu nigdy nie powinien się pojawić. Jeśli w Twoim kodzie jeden element posiada 256 klas, to nie przeglądarka odpowiada za pojawiający się błąd, tylko Ty. Nie ma sensu naprawiać czegoś, co jest prawie niemożliwe do zreprodukowania a spowolniłoby mechanizmy aktualnie obliczające specyficzność, więc ten bug został oznaczony jako nierozwiązywalny. Mimo wszystko jest to dosyć interesująca ciekawostka.
1Michal Budzynski dnia 18.08.2012 o 04:31: