Tento článek je překladem anglického originálu vydaného na portálu Dev.Opera.

Úvod

Když vytváříte dokumenty, bývá užitečné číslovat jednotlivé sekce a vytvořit obsah. Můžete číslovat ručně vkládáním čísel přímo do HTML, to ovšem bude neefektivní, pokud se jejich pořadí mění a vy musíte všechna čísla aktualizovat. CSS 2.1 nabízí automatické číslování pomocí čítačů (CSS counters) a tento článek vám ukáže, jak je můžete používat. Než začneme, je třeba říct, že Internet Explorer zatím čítače nepodporuje, ale připravovaná verze IE8 již ano.

Nastavujeme čítač

Prvním krokem je vynulování čítače na jeho základní hodnotu a přidělení jména. To uděláme vlastností counter-reset stejně jako v následující příkladu:

body { counter-reset: section; } 

V tomto příkladu jsme na začátku prvku body vynulovali čítač na hodnotu nula a pojmenovali jsme jej section. Čítači můžeme přidělit jakýkoliv název. Můžeme také použít volitelný druhý argument a ručně nastavit výchozí hodnotu čítače. Pokud chcete, aby čítač začínal od čísla 5, nastavíte jej takto:

body { counter-reset: section 4; } 

V tomto případě jsme museli napsat hodnotu 4, protože čítač se inkrementuje před svým každým zobrazením. Pokud nastavíte jeho počáteční hodnotu na 4, je před tím, než se prvně zobrazí, jeho hodnota zvýšena na 5.

Inkrementujeme čítač

V dalším kroku musíme určit, kdy se má náš čítač inkrementovat a o jakou hodnotu. To nastavíme vlastností counter-increment. Pokud nespecifikujeme žádnou hodnotu, bude použita výchozí hodnota 1.

body { counter-reset: section 4; }
h2 { counter-increment: section; } 

Pokud chcete raději zvyšovat čítač vždy o dvojku, použijte:

h2 { counter-increment: section 2; } 

Můžete zadat i nulu nebo záporné hodnoty. Pokud nastavíte nulování a inkrementaci u stejné značky HTML, bude napřed provedeno nulování a teprve po té proběhne inkrementace o specifikovanou hodnotu. Výsledkem následujícího příkladu bude hodnota 2.

h2 {
    counter-reset: section;
    counter-increment: section;
} 

Zobrazení čítače

Jakmile je čítač nastaven, můžete jej na stránce zobrazit. To provedeme pomocí generovaného obsahu – funkce counter a pseudotřídy  :before.

body { counter-reset: section 4; }
h2 { counter-increment: section; }
h2:before{ content: counter(section) " "; } 

Pokud zobrazíte čítač na stejném prvku HTML, na kterém provádíte inkrementaci, jak jsme udělali i v příkladu výše u h2, pak je čítač napřed inkrementován a teprve po té použit.

Nyní se můžete podívat na hotovou ukázku.

Používáme dva a více čítačů

Funkci counter můžete ve vlastnosti content použít i vícekrát. V následujícím příkladu použiji dva čítače k číslování sekcí a podsekcí. Čítač podsekce bude s každou novou sekcí vynulován.

body { counter-reset: section; }

h2 {
    counter-increment: section;
    counter-reset: sub-section;
}

h2:before, h3:before { content: counter(section) "." counter(sub-section) " "; }

h3:before {
    counter-increment: sub-section;
} 

Používáme vnořené čítače

Vedle zobrazování jednotlivých čítačů existuje i funkce counters() pro zobrazení vnořených čítačů. Je vhodná např. pro seznamy, které mohou být vnořovány do sebe. V příkladu výše by ale nefungovala, protože tam podsekce nebyla vnořena v hlavní sekci, ale zobrazena vedle ní.

Vnořené čítače můžeme nastavit následovně:

ol {
  counter-reset: section;
  list-style-type: none;
}

ol li { counter-increment: section; }

ol li:before{ content: counters(section, ".") ". "; } 

Tím zvýšíme čítač s každou položkou seznamu bez ohledu na to, kolik vnořených seznamů kód obsahuje. Vynulování čítače musíte provést na správném místě, aby bylo nulování provedeno pro každý vnořený seznam. V tomto případě nulujeme čítač na značce ol. V následujícím příkladu bude první vnořený seznam začínat 1.1 a zvyšovat se 1.2, 1.3 atd. Druhý vnořený seznam bude začínat hodnotou 1.1.1 a zvyšovat se 1.1.2 atd.

<ol>
    <li>item 1
        <ol>
            <li>sub item 1
                <ol>
                    <li>sub-sub item 1</li>
                    <li>sub-sub item 2</li>
                    <li>sub-sub item 3</li>
                </ol>
             </li>
             <li>Sub item 2</li>
        </ol>
    </li>
    <li>item 2</li>
</ol> 

Podívejte se na ukázku používající vnořené čítače.

Nastavujeme styl čítače

Čítači je možné nastavit styl pomocí druhého argumentu funkce counter. Hodnoty jsou stejné jako u vlastnosti list-style-type. Ačkoliv jsou všechny hodnoty validní, u čítačů dávají smysl jen některé hodnoty, protože disc, square nebo circle zůstávají vždy stejné bez ohledu na hodnotu čítače. Styl čítače můžete nastavit následovně:

ol li:before{ counter(answer, lower-alpha) ") "; } 

Zobrazte si ukázku použití funkce counter pro nastavení stylu čítače. V příkladu najdete ukázku explicitního specifikování hodnot pro nulování a inkrementaci.

Použití čítačů k nahrazení zastaralého atributu start

Pokud potřebujete použít u značky ol atribut start, aby váš seznam začínal jinou hodnotou než jedničkou, a zároveň používáte striktní doctype, zřejmě jste si všimli, že vaše stránka není validní. Vedou se spory, zda je atribut start prezentační nebo nikoliv a pracovní verze HTML5 jej již za zastaralý (deprecated) nepovažuje (alespoň v době psaní tohoto článku). Ovšem i kdyby byl atribut start v HTML5 opět povolen, nepomůže vám to, pokud se vaše stránka musí validovat proti doctype HTML4. Doctype HTML5 zatím není určen pro produkční použití, protože podpora HTML5 je stále experimentální. Pokud chcete, aby vaše stránka byla validní, musíte buď použít doctype transitional nebo čítače.

Pokud chcete seznam začít čtyřkou místo jedničkou, docílíte toho následovně:

body { counter-reset: list-order 3; }

ol li {
    counter-increment: list-order;
    list-style-type: none;
}

ol li:before{ content: counter(list-order) " "; } 

Nesmíte zapomenout schovat odrážku seznamu, jinak by se zobrazilo dvojí číslování.

Podívejte se na ukázku použití čítačů pro nahrazení atributu start.

Závěr

V tomto článku jsme probrali, jak nastavit a stylovat čítače pomocí kaskádových stylů místo, abyste je museli psát přímo do HTML kódu. Jsou užitečné pro číslování sekcí článků nebo pro číslování tabulek. Použití čítačů vám ušetří čas při změně struktury dokumentu. Je také flexibilnější, protože typ čítače může být změněn v kaskádových stylech a bude automaticky aktualizován, ať již obsah stránky změníte vy nebo javascriptový kód (např. pokud máte skript pro řazení seznamů nebo tabulek). Zmínili jsme i možnost nahrazení zastaralého atributu start. Čítače jsou jednoduché k používání, jedinou překážkou jejich širšího použití je, že nejsou podporovány staršími verzemi Internet Exploreru.

Tento článek je překladem textu Automatic numbering with CSS Counters, jehož autorem je David Storey a je zde zveřejněn s laskavým svolením Opera Software.