CSS 3 -

Niestandardowy typ stylu wykazu @counter-style

Język CSS udostępnia szerokie możliwości ustalania typu wykazu. Są to zarówno wykazy z wyróżnikami (markerami) graficznymi jak i różnorodne style numeracji. Co jednak zrobić, jeśli żaden z wbudowanych rodzajów nie spełnia naszych oczekiwań? Rozwiązaniem może być użycie specjalnej reguły stylów @counter-style, która pozwala zdefiniować swój własny, niestandardowy typ stylu wykazu, w którym można precyzyjnie kontrolować wygląd jego wyróżników.

Aby utworzyć swój niestandardowy typ stylu wykazu, najpierw w arkuszu stylów (wewnętrznym lub zewnętrznym) należy wstawić jego definicję:

@counter-style typ {
	system: algorytm;
	dodatkowe-deklaracje
}

ol {
	list-style-type: typ;
}

Niestandardowy identyfikator (ang. custom identifier) to tekst składający się tylko z małych i wielkich liter łacińskich (ale bez polskich znaków diakrytycznych), znaków podkreślnika ("_"), myślników ("-"), cyfr arabskich (ale nie na początku ani nie zaraz po myślniku znajdującym się się na początku!) oraz innych znaków Unicode, których nie da się normalnie wpisać z klawiatury (tzn. o kodzie numerycznym większym niż "\80" - znak euro "€"). Jeśli chcemy użyć innych znaków, należy je poprzedzić odwróconym ukośnikiem ("\").

System cykliczny @counter-style {system: cyclic}

@counter-style typ {
	system: cyclic;
	symbols: symbole;
}

Punkty wykazu będą opatrzone kolejnymi z podanych symbolów. Jeśli punktów w wykazie będzie więcej, zostaną ponownie użyte symbole z początku listy i tak w kółko.

Przykład @counter-style {system: cyclic}

@counter-style nazwa {
	system: cyclic;
	symbols: a b c;
}
ol {
	list-style-type: nazwa;
}

System ustalony @counter-style {system: fixed}

@counter-style typ {
	system: fixed;
	symbols: symbole;
}

@counter-style typ {
	system: fixed;
	symbols: symbole;
	fallback: typ-domyślny;
}

Punkty wykazu będą opatrzone kolejnymi z podanych symbolów. Jeśli punktów w wykazie będzie więcej, zostanie użyty typ-domyślny albo kolejne liczby arabskie poczynając od wartości liczonej od pierwszego punktu wykazu.

Przykład @counter-style {system: fixed}

@counter-style nazwa {
	system: fixed;
	symbols: a b c;
}
ol {
	list-style-type: nazwa;
}

System symboliczny @counter-style {system: symbolic}

@counter-style typ {
	system: symbolic;
	symbols: symbole;
}

Przy generowaniu wyróżników wykazu podane symbole będą powielane odpowiednią liczbę razy.

Przykład @counter-style {system: symbolic}

@counter-style nazwa {
	system: symbolic;
	symbols: a b c;
}
ol {
	list-style-type: nazwa;
}

System alfabetyczny @counter-style {system: alphabetic}

@counter-style typ {
	system: alphabetic;
	symbols: symbole;
}

Symbole zostaną użyte do utworzenia numerowania alfabetycznego. Nie trzeba się jednak tutaj ograniczać jedynie do liter - symbole mogą być dowolnymi znakami.

Przykład @counter-style {system: alphabetic}

@counter-style nazwa {
	system: alphabetic;
	symbols: a b c;
}
ol {
	list-style-type: nazwa;
}

System numeryczny @counter-style {system: numeric}

@counter-style typ {
	system: numeric;
	symbols: symbole;
}

Symbole zostaną potraktowane jako kolejne cyfry (poczynając od zera) systemu liczbowego. Nie trzeba się jednak tutaj ograniczać jedynie do cyfr arabskich - symbole mogą być dowolnymi znakami.

Przykład @counter-style {system: numeric}

Numeracja liczbami w systemie binarnym (dwójkowym):

@counter-style nazwa {
	system: numeric;
	symbols: "0" "1";
}
ol {
	list-style-type: nazwa;
}

Zwróć uwagę, że w powyższym przykładzie symbole muszą być ujęte w cudzysłowy (albo apostrofy), ponieważ niestandardowy identyfikator nie może się rozpoczynać od cyfry.

System addytywny @counter-style {system: additive}

@counter-style typ {
	system: additive;
	additive-symbols: symbole-addytywne;
}

W systemie addytywnym liczby są tworzone poprzez dodawanie do siebie cyfr, z których się składają. Pewnym rodzajem takiego systemu są liczby rzymskie. Przypomnę, że istnieją następujące cyfry rzymskie: I (1), V (5), X (10), L (50), C (100), D (500), M (1000). Odczytując wartość liczby rzymskiej wykonujemy odpowiednie operacje arytemtyczne:

• Jeżeli mniejsza cyfra stoi przed większą, odejmujemy ją od tej drugiej - np.: IV = 5 - 1 = 4
• W przeciwnym razie dodajemy cyfry do siebie - np.: VII = 5 + 1 + 1 = 7

Deklaracja "system: additive" działa analogicznie jak liczby rzymskie, ale obsługuje tylko dodawanie, a nie odejmowanie.

Przykład @counter-style {system: additive}

Tak by wyglądały liczby rzymskie, gdyby wchodziły w skład systemu czysto addytywnego (zwróć uwagę, że liczba 4 nie jest poprawnym liczebnikiem rzymskim):

@counter-style nazwa {
	system: additive;
	additive-symbols: 1000 M, 500 D, 100 C, 50 L, 10 X, 5 V, 1 I;
}
ol {
	list-style-type: nazwa;
}

Ujemne numery wykazu @counter-style {negative}

@counter-style typ {
	negative: przedrostek;
	dodatkowe-deklaracje
}

@counter-style typ {
	negative: przedrostek przyrostek;
	dodatkowe-deklaracje
}

Punkty wykazu mogą przyjmować również wartości ujemne. Taki efekt można wywołać przy pomocy atrybutu start="..." albo value="..." [zobacz podpunkty: "Wykaz numerowany z podaniem początkowego numeru" oraz "Zmiana numerowania w trakcie" w rozdziale pt. HTML / Wykaz]. W takich przypadkach mamy możliwość zdefiniowania specjalnego wyglądu tego typu wartości.

Przykład @counter-style {negative}

Wyświetlenie znaku gwiazdki przed każdą wartością ujemną:

@counter-style nazwa {
	system: numeric;
	symbols: "0" "1" "2" "3" "4" "5" "6" "7" "8" "9";
	negative: "*";
}
ol {
	list-style-type: nazwa;
}

Ujęcie ujemnych wartości w nawias:

@counter-style nazwa {
	system: numeric;
	symbols: "0" "1" "2" "3" "4" "5" "6" "7" "8" "9";
	negative: "(-" ")";
}
ol {
	list-style-type: nazwa;
}

Przedrostek i przyrostek wykazu @counter-style {prefix, suffix}

@counter-style typ {
	prefix: przedrostek;
	dodatkowe-deklaracje
}

@counter-style typ {
	suffix: przyrostek;
	dodatkowe-deklaracje
}

@counter-style typ {
	prefix: przedrostek;
	suffix: przyrostek;
	dodatkowe-deklaracje
}

Standardowo przed symbolem wyróżnika wykazu nie znajduje się żaden dodatkowy tekst, natomiast po nim - znak kropki ze spacją. Czasami jednak możemy mieć potrzebę wyróżnienia punktów wykazu wizualnie w inny sposób. Na przykład często na końcu publikacji naukowych umieszcza się wykaz wszystkich źródeł, do których autor odnosił się w tekście. Źródła zazwyczaj oznacza się kolejnymi liczbami umieszczonymi w nawiasach kwadratowych. Dzięki funkcji ustalenia przedrostka i przyrostka możemy uzyskać taki sam efekt w języku CSS.

Przykład @counter-style {prefix, suffix}

@counter-style nazwa {
	system: numeric;
	symbols: "0" "1" "2" "3" "4" "5" "6" "7" "8" "9";
	prefix: "[";
	suffix: "] ";
}
ol {
	list-style-type: nazwa;
}

Wykaz z wyróżnikami w postaji ikon emoji:

@counter-style nazwa {
	system: cyclic;
	symbols: 👉;
	suffix: " ";
}
ul {
	list-style-type: nazwa;
}

Przedział numerów wykazu @counter-style {range}

@counter-style typ {
	range: przedział;
	dodatkowe-deklaracje
}

@counter-style typ {
	range: przedział;
	fallback: typ-domyślny;
	dodatkowe-deklaracje
}

Może się zdarzyć, że wykaz z bardzo dużą liczbą punktów nie będzie wyglądał zbyt estetycznie. W zależności od użytego systemu (algorytmu generowania sekwencji wyróżników) poszczególne punkty wykazu mogą zawierać nienaturalnie dużo symbolów albo będą nieczytelne bądź taka numeracja okaże się niezrozumiała. Możemy pośrednio zaradzić takiej sytuacji poprzez określenie przedziału wartości, które obejmuje definicja typu stylu wykazu. Jeśli na stronie pojawi się jednak lista z większą liczbą punktów, zostaną one podpisane przy pomocy typu-domyślnego albo kolejnymi liczbami arabskimi poczynając od wartości liczonej od pierwszego punktu wykazu.

Przykład @counter-style {range}

@counter-style nazwa {
	system: symbolic;
	symbols: "*";
	range: 1 3;
}
ol {
	list-style-type: nazwa;
}

Dopełnienie numerów wykazu @counter-style {pad}

@counter-style typ {
	pad: liczba symbol;
	dodatkowe-deklaracje
}

Przeglądarki zwykle wyświetlają wyróżniki wykazów w taki sposób, aby były wyrównane ze sobą do prawej strony. Chociaż wygląda to estetycznie, czasami możemy mieć potrzebę ułożenia wyróżników wykazu w inny sposób. Na przykład dosć często spotyka się dopełnianie liczb na początku zerami. Między innymi taki właśnie efekt pozwala nam uzyskać powyższa deklaracja.

Przykład @counter-style {pad}

@counter-style nazwa {
	system: numeric;
	symbols: "0" "1" "2" "3" "4" "5" "6" "7" "8" "9";
	pad: 2 "0";
}
ol {
	list-style-type: nazwa;
}

System rozszerzony @counter-style {system: extends}

@counter-style typ {
	system: extends typ-bazowy;
	dodatkowe-deklaracje
}

Definiowanie niestandardowego typu stylu wykazu od zupełnych podstaw może być dość żmudne. Można sobie ten proces jednak znacznie ułatwić. Wystarczy skorzystać z wcześniej zdefiniowanego lub wbudowanego typu i pozmieniać w nim tylko te deklaracje, które nam nie odpowiadają.

Przykład @counter-style {system: extends}

@counter-style nazwa {
	system: extends decimal;
	prefix: "[";
	suffix: "] ";
}
ol {
	list-style-type: nazwa;
}

Anonimowy typ stylu wykazu {list-style-type: symbols}

CSS 3 -

selektor { list-style-type: symbols(symbole) }

selektor { list-style-type: symbols(algorytm symbole) }

Reguła stylów @counter-style daje bardzo rozbudowane możliwości kontrolowania wyglądu wyróżników wykazu. Czasami jednak potrzebujemy tylko zupełnie podstawowych funkcji, a dodatkowo chcemy przypisać niestandardowy typ stylu tylko do jednego elementu. Właśnie w takiej sytuacji wygodniejsze może się okazać użycie funkcji symbols(...), którą przypisujemy bezpośrednio do własności list-style-type lub list-style.

Przykład {list-style-type: symbols}

ol {
	list-style-type: symbols(cyclic "a" "b" "c");
}

Zauważ, że w przypadku anonimowego typu stylu wykazu przyrostek stanowi tylko spacja, a nie kropka ze spacją - jak to ma miejsce przy używaniu pełnej reguły stylów @counter-style.