- Vlastnost counter-increment umožňuje vývojářům dynamicky zvyšovat nebo snižovat hodnotu proměnné CSS zvané čítač.
- Efektivní číslování vyžaduje kombinaci funkce counter-reset pro inicializaci počítadla a funkce counter() pro vykreslení hodnoty.
- Pokročilé použití zahrnuje vnořené čítače pomocí funkce counters() a vlastní formátování s římskými číslicemi nebo abecedními seznamy.
Už jste se někdy podívali na dlouhý dokument a přáli si, abyste mohli automaticky číslovat nadpisy, aniž byste museli ručně psát „1, 2, 3“ pokaždé, když přidáváte novou sekci? Máte štěstí, protože CSS má vestavěný způsob, jak to zvládnout. Představte si čítače CSS jako interní proměnné , které sledují čísla, když prohlížeč vykresluje vaši stránku, což vám umožňuje vytvářet seznamy a sekvence, které se aktualizují za chodu.
I když se to může zdát jako něco, k čemu potřebujete JavaScript, tyto nástroje jsou nativní pro prohlížeč a neuvěřitelně lehké. Použitím counter-increment v kombinaci s dalšími vlastnostmi můžete transformovat prosté HTML prvky do strukturované, číslované sekvence, což uživatelům výrazně usnadní navigaci v obsahu a zároveň zachová čisté a sémantické značení.
Základní mechanika: Jak to funguje
Abyste tyto čítače spustili, nemůžete použít pouze jednu vlastnost; potřebujete malý tým CSS pravidel, které spolupracují. Nejprve máte counter-reset , který slouží jako počáteční řádek. Inicializuje čítač se specifickým názvem a volitelně i počátečním číslem. Pokud číslo nezadáte, výchozí hodnota je 0. Pokud například chcete, aby vaše první položka byla 1, resetovali byste ji na 0, než se položky objeví.
Pak přichází hvězda večera: vlastnost counter-increment . Tato vlastnost říká prohlížeči, aby přidal hodnotu k vašemu pojmenovanému čítači pokaždé, když narazí na konkrétní selektor. Ve výchozím nastavení přidává 1, ale můžete zadat libovolné celé číslo . Pokud použijete záporné číslo, například -1, čítač bude ve skutečnosti odpočítávat, což je šikovný trik pro vytváření odpočítávání nebo obrácených seznamů. Pokud potřebujete zastavit zvyšování čítače v určité oblasti, můžete jej jednoduše nastavit na hodnotu none.
Přenesení čísel na obrazovku
Jedna věc, která začátečníky zaskočí, je, že čítače jsou neviditelné ve výchozím nastavení. Jsou to jen čísla plovoucí v paměti prohlížeče. Abyste je skutečně viděli, musíte použít vlastnost obsahu, obvykle uvnitř ::before or ::after pseudoelement. Zde se nachází Funkce counter() Do hry vstupuje , který načte aktuální hodnotu vaší proměnné a vypíše ji jako text.
- Základní implementace: Zaměříte se na prvek, který chcete očíslovat, a aplikujete
counter-incrementa poté použijtecontent: counter(name);v pseudo-elementu. - Vlastní řetězce: Nejste omezeni pouze počtem. Můžete zřetězení textu, Jako
content: \"Step \" counter(my-counter) \": \";pro vytvoření profesionálnějšího vzhledu. - Stylování výstupu: Vzhled čísla můžete změnit předáním druhého argumentu funkci. Například horní římský vám dá římské číslice, zatímco nižší alfa poskytuje seznam s písmeny.
Pokročilé techniky a případy použití v reálném světě
Pokud máte co do činění s vnořené struktury, jako například obsah, kde máte sekce 1, 1.1 a 1.1.1, jeden čítač nestačí. Zde se Funkce čítače() (množné číslo) je záchrana života. Na rozdíl od jednotného čísla, counters() může sledovat více vnořených úrovní a spojte je provázkem, například tečkou, k vytvoření hierarchického systému číslování.
Velmi praktickou aplikací je přidání čísla řádků do bloků kóduPokud používáte zvýrazňovače syntaxe, které nepodporují číslování, můžete zacílit na řádky kódu pomocí CSS. Vynulováním počítadla na <pre> tag a jeho zvyšování na každém .line třídu, vytvoříte bezešvý sloupec číslování aniž by se dotkl vaší JavaScriptové logiky.
Dalším chytrým trikem je počítání sourozenců které technicky nejsou vnořené. Pokud máte řadu <h2> a <h3> štítky, můžete vytvořit <h2> resetujte <h3> počítadlo. Tím se vytvoří logická posloupnost kde podnadpisy začínají od 1 pokaždé, když se objeví nový hlavní nadpis, i když jsou v DOMu všechny sourozenecké.
Slovo o přístupnosti
I když je lákavé použít CSS čítače k tomu, aby jakákoli skupina divů vypadala jako seznam, měli byste být opatrní. Sémantické HTML je králemPokud je obsah logicky seznam, použijte <ol> a <li>Použití CSS k napodobení seznamu je skvělé pro vizuální dekorace nebo přidání číslování k nadpisům, ale nemělo by to nahradit základní strukturu, na kterou se čtečky obrazovky spoléhají pro efektivní navigaci na stránce.
Využitím možností counter-reset, counter-increment a funkce counter() se můžete odklonit od statického číslování a přijmout dynamický systém, který za vás zvládne všechny matematické výpočty. Ať už vytváříte složitý technický manuál s vnořenými sekcemi, nebo jen vylepšujete úryvky kódu blogu, tyto nástroje poskytují robustní a výkonný způsob, jak zvládat řazení přímo ve vašich stylech.
