Zmiana koloru markera elementu listy
11 października 2006
Rozwiązania czysto CSS-owe są super. Obrazki dodają wigoru arkuszom stylów, ale na przykład sztuczki z CSS Play powalają pomysłowością autora. Wracając do tematu - chciałem zmienić kolor markera listy. Specyfikacja mówi, że tego koloru nie można ręcznie określić:
The list properties (…) do not allow authors to specify distinct style (colors, fonts, alignment, etc.) for the list marker or adjust its position with respect to the principal box.
Mimo wszystko przeglądarki wypełniają go kolorem tekstu.
Zastananowiło mnie to. Stosowałem już kiedyś sztuczki polegające na zmianie koloru tekstu w elemencie listy korzystając z dodatkowego tagu - spana albo linka. W ten sposób otrzymywałem kolorowy bullet bez obrazka.
Teraz jeśli udałoby mi się zmienić kolor tekstu w elemencie listy bez dodatkowego elementu możnaby kolorować CSS-em markery list.
Wypróbowałem w końcu pseudoklasę :first-line.
li {color: #F00;}li:first-line {color: #000;}
Eksperyment przyniósł ciekawe wyniki. Firefox oraz Konqueror (zakładam, że Safari też) zmieniły kolor markera na czerwony zgodnie z regułą dla li, a pierwszą linijkę tekstu potraktowały kolorem czarnym.
Internet Explorer i Opera zamalowały kropkę na czarno. Wygląda to tak, jakby pierwsza linijka tekstu oddziaływała na kolor markera, bądź sam marker był uznawany za część tekstową elementu.
Postanowiłem sprawdzić jeszcze jedną rzecz - otoczyłem element li przez outline i border. O ile border był przewidywalny, tak outline w Firefoksie otoczył główny element oraz marker, a Opera zrobiła z outline drugi border.
I teraz zastanawia mnie co jest poprawne, bo specyfikacja nie mówi dokładnie jak się za to zabrać. O wiele bardziej wygodne wydaje się zachowanie Firefoksa, zarówno możliwość stworzenia kolorowych kropek dla prostej listy jak i otoczenie całości za pomocą outline - wykorzystywane przez rozszerzenia Fx i jego interfejs także. Czemu Opera znowu robi po swojemu? Albo czy istnieje zapis w specyfikacji, który usprawiedliwia taki wybór?
Czy kolorowanie markera tylko dla elementów listy składających się z jednej linijki ma sens? Możliwe; na pewno czasem mogłoby się to przydać, na przykład w listach, które nie zajmują wiele miejsca na ekranie. Chyba, że znacie inną metodę na zmianę koloru markera? :>
