CSS counter

Když do stránky umístíme číslovaný seznam <ol>, budou mít jednotlivé položky <li> automatické číslování. Není do kódu nutné čísla ručně psát, ale zajistí je prohlížeč.

  1. První
  2. Druhý
  3. Třetí

Atributem start pro <ol> je navíc možné nastavit počáteční číslo, které se bude inkrementovat (zvyšovat).

  1. Čtvrtý
  2. Pátý

To jsou zhruba všechny možnosti, které nabízí přímo HTML. Na všechno ostatní je tu counter v CSS.

Funkčnost v prohlížečích

Funguje v IE 8 a novějších.

Použití

Nasimulování číslování v běžném <ol> by vypadalo následovně (ukázka):

ol {
  counter-reset: seznam;
}
li:before {
  counter-increment: seznam;
  content: counter(seznam) ". ";
}

Funkčnost je následující:

counter-reset

Vyresetuje počítadlo s názvem seznam na číslo 0. Jednotlivé čítače lze do sebe libovolně zanořovat a vytvářet i více úrovní.

Ve většině prohlížečů (kromě staré Opery 12) je nutné counter-reset použít, jinak nebude počítadlo fungovat.

counter-increment

Zvýší nebo sníží pořadové číslo čítače seznam. Výchozí chování je zvýšit o jedničku.

Naopak odečítání nebo vyšší krok lze nastavit číslem za názvem čítače.

element:before {
  counter-increment: seznam +2 druhySeznam -4;
  content: counter(seznam) "." counter(druhySeznam)
}

Výše uvedený kód tedy zvýší čítač seznam o 2 a čítač druhySeznam sníží o 4. Ano, dá se zvyšovat více čítačů naráz. Že tento (nejspíš absurdní) příklad funguje dokládá živá ukázka.

counter
Funkce counter potom slouží k přečtení hodnoty čítače. Tato hodnota se jako obsah :before/:after pseudo-elementu nastaví přes CSS vlastnost content.

Číslování kapitol

Zajímavější příklad counteru je například číslování nadpisů. Ukázka.

Styl číslování

Jako druhý parametr funkce counter se dá předat podoba čísla/symbolu číslování. Možné hodnoty jsou stejné jako u list-style-type. Pochopitelně v případě použití nečíselných stylů se čítače nijak neprojeví. Tedy visuálně. V pozadí se čítač navýší, i když by byl skryt hodnotou none.

element:before {
  counter-increment: citac;
  content: counter(citac, upper-roman);
}

Tento čítač bude používat římské číslice. Ty mohou být velká (upper-roman) nebo malá (lower-roman). Stejně tak jde použít číslování písmeny (upper-alpha a lower-alpha).

Upravená živá ukázka to hezky ilustruje.

Odkazy jinam

To je všechno. Líbil se vám článek a chcete se dozvědět, až vyjde další?

Sledujte:

 

Připomínky mi pište do komentářů ↓

Oříznutí CSS clip

Oříznutí CSS vlastností clip

CSS vlastnost clip slouží k oříznutí obsahu elementu.

CSS vlastnosti content a attr

Úprava obsahu pomocí content a attr

Pomocí CSS vlastnosti content a funkce attr lze ovlivňovat z CSS výsledný textový obsah webu.

CSS transition

Animace v CSS pomocí transition

CSS vlastností transition lze na stránce docílit přechodových animací bez JavaScriptu.

Počítání v CSS funkcí calc()

Počítání v CSS pomocí calc()

Od Exploreru 9 a mimo starou Operu 12 lze přímo v CSS provádět jednoduché výpočty využitím calc().

CSS toggle()

CSS funkce toggle()

Nefunguje zatím snad nikde, měla by sloužit k pohodlnému zadávání hodnot pro zanořené elementy stejného názvu.

Komentáře