Reguła CSS @counter-style

Reguła CSS @counter-style służy do tworzenia własnych stylów liczników list, którymi można się posługiwać za pomocą nazwy w taki sam sposób, jak standardowymi stylami list we własności list-style-type lub list-style.

Wartości i składnia reguły CSS @counter-style

Reguła @counter-style jako wartość przyjmuje nazwę tworzonego licznika oraz listę specjalnych własności zwanych deskryptorami, które dostosowują jej różne opcje i ustawienia.

Ogólnie rzecz biorąc, nazwa powinna być prawidłowym identyfikatorem CSS. Wielkość liter w nazwie ma znaczenie oraz jako nazwy nie można używać słowa kluczowego none ani żadnego innego z uniwersalnych słów kluczowych CSS. Ponadto zakazane są standardowe nazwy liczników decimal, disc, square, circle, disclosure-open oraz disclosure-closed.

Poniżej znajduje się przykładowa deklaracja reguły @counter-style tworząca styl licznika o nazwie moj-licznik, z jednym deskryptorem — symbols:

@counter-style moj-licznik {
  symbols: Q W E R T Y;
}

Ta reguła tworzy licznik, który oznacza elementy listy literami Q, W, E, R, T i Y. Poniżej znajduje się opis wszystkich deskryptorów reguły @counter-style.

system

Określa algorytm tworzenia tekstowej reprezentacji wartości licznika. Może przyjmować następujące wartości:

• cyclic — powoduje cykliczne powtarzanie zestawu znaków zdefiniowanych w deskryptorze symbols, np.:

  
  @counter-style moj-licznik {
    system: cyclic;
    symbols: Q W E;
  }
  ul {
    list-style: moj-licznik;
  }
  

  Efekt:

  Alt: Przykład użycia reguły @counter-style z deskryptorem system: cyclic
• fixed — zestaw znaków zdefiniowany w deskryptorze symbols zostaje użyty tylko raz. Po jego wyczerpaniu dalsze elementy listy są oznaczane domyślnymi symbolami.
• numeric — pozwala stworzyć własny pozycyjny system liczbowy poprzez interpretację podanych w symbols znaków jako cyfr tego systemu.

  
  @counter-style szesnastkowy {
    system: numeric;
    symbols: "0" "1" "2" "3" "4" "5" "6" "7" "8" "9" "A" "B" "C" "D" "E" "F";
  }
  

• alphabetic — interpretuje symbole jako litery alfabetu, podobnie jak w standardowym liczniku lower-alpha.
• symbolic — cyklicznie powtarza podany zestaw symboli. Po jego wyczerpaniu podwaja je, potem potraja itd.
• additive — pozwala nadać znakom wartości liczbowe i na tej podstawie tworzy licznik.
• extends — umożliwia wykorzystanie istniejącego systemu i jego zmodyfikowanie.

Wartości cyclic, numeric, alphabetic, symbolic oraz fixed wymagają deskryptora symbols, natomiast wartość additive wymaga deskryptora additive-symbols.

symbols

Określa zestaw znaków, które mają być używane do reprezentacji markera. Mogą to być łańcuchy, grafiki lub identyfikatory zdefiniowane przez użytkownika.

additive-symbols

Definiuje krotki do użycia w addytywnych systemach numerowania, takich jak liczby rzymskie.

negative

Określa znaki, które mają być dodane przed lub za licznikiem, gdy wartość jest ujemna.

prefix

Określa łańcuch znaków do dodania przed licznikiem.

prefix

Określa łańcuch znaków do dodania za licznikiem.

range

Definiuje zakres wartości, do którego odnosi się licznik.

pad

Określa dopełnienie licznika, aby zawsze miał określoną minimalną długość, np. 01, 02 itd.

speak-as

Określa sposób, w jaki syntezatory mowy mają zapowiadać licznik.

fallback

Określa nazwę licznika awaryjnego.

Podsumowanie