Protistrana - Triky CSS

Obsah:

Anonim

Vlastnost counter-setCSS, která odpovídá svému názvu, nastavuje počáteční hodnotu čítače CSS. Víte, jak seřazené seznamy začínají na 1 a odtud se zvyšují? counter-setVlastnost nám umožňuje soubor, který začíná hodnotu na něco jiného, řekněme, -1. Nebo 2. Nebo 200! Kromě toho, že se použije na čítače CSS namísto seřazených seznamů.

Řekněme, že máme vlastní počítadlo pro seznam kapitol knih, kde je před název kapitoly přidáno číslo kapitoly.

Začali bychom definováním pultu s counter-resetvlastností. Zavoláme to chaptera definujeme to na třídě nadřazeného kontejneru pro naše kapitoly nazvané kreativně .chapters.

.chapters ( counter-reset: chapter; )

Dále bychom přiřadili chapterpočítadlo prvku pomocí counter-incrementvlastnosti. Jelikož se jedná o kapitoly knih, použijeme je

prvků za předpokladu, že by název knihy byl

. Všimněte si, že to vlastně přiřazujeme :beforepseudoelementu, protože nám to umožňuje přepočítat náš čítač na skutečný

živel. 
h2:before ( counter-increment: chapter; )

Super, poslední věc, kterou bychom potřebovali, je říct pultu, co by mělo zobrazit. To se děje na contentvlastnosti prostřednictvím counter()funkce. Hodíme také trochu barvy na pult, protože to design vyžaduje.

h2:before ( color: red; content: "Chapter " counter(chapter) ": "; counter-increment: chapter; )

Hej, vypadáme dobře!

Ale počkej! Opravdu nezkopávám skutečnost, že začínáme kapitolou 1. Chci říct, že „Forward“ ve skutečnosti není kapitola. Pokud vůbec, je to jako v kapitole 0.

To je místo, kde counter-setpřichází! Pojďme nastavit věci tak, aby začínaly na nule:

h2:first-of-type::before ( counter-set: chapter; )

Tam jedeme! To je lepší. Pouhým nastavením hodnoty vlastnosti na název počitadla jsme nastavili seznam kapitol tak, aby začínal v kapitole 0. Stejně snadno jsme mohli nastavit, aby to začalo u něčeho jiného, ​​například u kapitoly 100.

A pokud prohlížeč nepodporuje counter-set? Fakt nic. To bude prostě ignorovat a seznam bude začínat na svém výchozím nastavení 1.

Syntax

( ? )+ | none

Jedná se v podstatě o fantazijní způsob, jak říci, že vlastnost má název vlastního počítadla ( ) a počáteční hodnoty ( ). Nebo nastavit nonea číslování bude začínat na výchozím bodu startu 1.

  • Počáteční hodnota: none
  • Platí pro: všechny prvky (včetně nevizuálních)
  • Zděděno: ne
  • Typ animace: podle typu vypočítané hodnoty

Hodnoty

/* Set "awesome-counter" to 0 */ counter-set: awesome-counter; /* Set "awesome-counter" to -10 */ counter-set: awesome-counter -10; /* Set "awesome1" to 0, and "awesome2" to 2 */ counter-set: awesome1 awesome2 2; /* Wipe out any other settings that may have been declared elsewhere */ counter-set: none; /* Global values */ counter-set: inherit; counter-set: initial; counter-set: unset;

Všimněte si, že counter-setvytvoří nový čítač, pokud název čítače deklarovaný na něm již nebyl definován někde jinde.

Podpora prohlížeče

TJ Okraj Firefox Chrome Safari Opera
Ne Ne 68+ Ne Ne Ne
Android Chrome Android Firefox Prohlížeč Android iOS Safari Opera Mini
Ne 79+ Ne Ne Ne
Zdroj: caniuse

Další čtení

  • Specifikace modulu CSS seznamů úrovně 3 (pracovní koncept)
  • Zobrazení aktuálního kroku s počitadly CSS
  • Počítání s čítači CSS a mřížkou
  • Jak obrátit vlastní počítadla CSS