Wskaż zapis stylu CSS formatujący punktor list numerowanych na wielkie cyfry rzymskie, a list punktowanych na kwadraty.
A.
ol { list-style-type: upper-alpha; } ul { list-style-type: disc; }
B.
ol { list-style-type: upper-roman; } ul { list-style-type: square; }
C.
ol { list-style-type: disc; } ul { list-style-type: upper-alpha; }
D.
ol { list-style-type: square; } ul { list-style-type: upper-roman; }
Pytanie z egzaminu CKE, styczeń 2022 (arkusz E.14-SG-22.01).
Ten zapis jest właściwy, bo dokładnie rozdziela formatowanie dwóch typów list HTML. Selektor ol odnosi się do listy numerowanej, czyli ordered list, a wartość list-style-type: upper-roman ustawia numerację w postaci wielkich cyfr rzymskich: I, II, III, IV itd. Z kolei selektor ul oznacza listę punktowaną, czyli unordered list, a list-style-type: square zmienia zwykłe kropki na kwadratowe punktory. W praktyce wygląda to tak: ol { list-style-type: upper-roman; } oraz ul { list-style-type: square; }. To jest zgodne z normalnym użyciem CSS i HTML, gdzie struktura dokumentu zostaje w HTML, a wygląd przenosimy do arkusza stylów. Moim zdaniem to jeden z tych przykładów, które dobrze pokazują sens CSS: nie zmieniamy znaczników listy tylko po to, żeby inaczej wyglądała, ale stylujemy ją właściwością przeznaczoną właśnie do tego. Warto też pamiętać, że list-style-type obsługuje wiele wartości, np. decimal, lower-alpha, upper-alpha, lower-roman, upper-roman, disc, circle i square. Dobra praktyka jest taka, żeby dobierać typ listy do znaczenia treści: ol dla kolejności kroków, instrukcji czy rankingów, a ul dla elementów równorzędnych, np. cech produktu albo menu.
W tym pytaniu łatwo pomylić dwa poziomy sprawy: rodzaj listy w HTML oraz wygląd znacznika ustawiany przez CSS. Lista ol jest listą numerowaną i domyślnie służy do elementów, które mają kolejność. Jeśli ma być zapisana wielkimi cyframi rzymskimi, potrzebna jest wartość upper-roman. Wartość upper-alpha nie oznacza cyfr rzymskich, tylko wielkie litery alfabetu, czyli A, B, C. To jest częsta pułapka, bo obie wartości zaczynają się od upper i obie są używane przy listach uporządkowanych, ale dają zupełnie inny efekt wizualny. Z kolei disc oznacza zwykły okrągły punktor, taki najczęściej domyślny dla ul, więc nie spełnia warunku kwadratów. Do kwadratowych punktorów trzeba użyć square. Błędem jest też zamiana stylów miejscami, na przykład ustawienie square dla ol oraz upper-roman dla ul. CSS technicznie potrafi zastosować różne wartości list-style-type do różnych elementów, ale semantycznie i praktycznie nie realizuje to polecenia. Pytanie mówi jasno: listy numerowane mają mieć wielkie cyfry rzymskie, a listy punktowane kwadraty. Z mojego doświadczenia warto najpierw rozpoznać selektory: ol odpowiada za listę uporządkowaną, ul za nieuporządkowaną. Dopiero potem dobierać wartość właściwości list-style-type. Dzięki temu nie strzela się po nazwach i mniej miesza się disc, square, upper-alpha oraz upper-roman.