Zapis CSS postaci:
ul { list-style-image: url('rys.gif'); }sprawi, że na stronie internetowej
A. rys.gif będzie stanowił ramkę dla listy nienumerowanej.
B. wyświetli się rysunek rys.gif jako tło listy nienumerowanej.
C. punktorem listy nienumerowanej będzie rys.gif
D. każdy z punktów listy będzie miał osobne tło pobrane z grafiki rys.gif
Pytanie z egzaminu CKE, styczeń 2017 (arkusz E.14-X-17.01).
Reguła ul { list-style-image: url('rys.gif'); } ustawia grafikę rys.gif jako znacznik, czyli punktator elementów listy nienumerowanej. W praktyce przeglądarka pobiera obrazek wskazany w url(...) i używa go w miejscu standardowej kropki, kwadratu albo okręgu przy elementach li. Warto zauważyć drobiazg: właściwość jest wpisana dla ul, ale działa na elementy listy, bo list-style-image jest dziedziczona przez li. Tak właśnie przewiduje mechanizm CSS Lists and Counters. Moim zdaniem to dość klasyczny przykład, gdzie CSS wpływa nie na zawartość listy, tylko na jej prezentację. W dobrym kodzie warto dodać też awaryjny punktator, np. list-style-type: disc, bo jeśli plik rys.gif nie zostanie znaleziony, użytkownik nadal zobaczy czytelną listę. Trzeba też pilnować rozmiaru grafiki, bo za duży obrazek może rozjechać odstępy i wyglądać mało profesjonalnie. Do bardziej precyzyjnych efektów, np. ikon SVG z kontrolą koloru i wyrównania, często stosuje się ::before albo nowocześniejsze możliwości stylowania markerów, ale list-style-image nadal jest poprawną, standardową właściwością CSS.
W tym zapisie łatwo pomylić różne mechanizmy CSS, bo pojawia się url('rys.gif') i od razu kojarzy się to z obrazkiem na stronie. Jednak sama obecność adresu grafiki nie oznacza jeszcze tła ani ramki. Za tło odpowiadają właściwości takie jak background-image albo skrót background, a nie list-style-image. Gdyby chodziło o tło całej listy nienumerowanej, reguła wyglądałaby mniej więcej tak: ul { background-image: url('rys.gif'); }. Wtedy obrazek byłby malowany pod zawartością elementu ul, zgodnie z zasadami tła, powtarzania i pozycjonowania. To zupełnie inny obszar modelu CSS. Podobnie ramka listy nie powstanie przez list-style-image. Do obramowania służy border, a dla graficznych ramek istnieje border-image. One określają krawędzie pudełka elementu, a nie znaczniki przy li. Nie należy też zakładać, że każdy punkt listy dostanie osobne tło. Tło pojedynczych elementów li ustawia się przez background-image przypisane do li, ewentualnie przez pseudoelementy, jeśli chcemy mieć dekoracyjne ikony i pełną kontrolę nad odstępami. list-style-image działa bardziej konkretnie: podmienia standardowy marker listy na obrazek. Z mojego doświadczenia ten błąd bierze się z traktowania wszystkich właściwości z image w nazwie jako podobnych, a CSS jest tu dość precyzyjny. Nazwa właściwości mówi, którego fragmentu formatowania dotyczy: background to tło, border to obramowanie, a list-style to styl punktowania listy.