Protisúprava - Triky CSS

Obsah:

Anonim

Vlastnosť counter-setCSS, verná svojmu názvu, nastavuje začiatočnú hodnotu pre počítadlo CSS. Viete, ako zoradené zoznamy začínajú na 1 a odtiaľ sa zvyšujú? counter-setVlastnosť nám umožňuje súbor, ktorý začína hodnotu na niečo iné, povedzme, -1. Alebo 2. Alebo 200! Ibaže sa aplikuje na počítadlá CSS namiesto zoradených zoznamov.

Povedzme, že máme vlastné počítadlo pre zoznam kapitol kníh, kde je pred názvom kapitoly uvedené číslo kapitoly.

Začali by sme definíciou pultu s counter-resetmajetkom. Zavoláme to chaptera definujeme to v triede nadradeného kontajnera pre naše kapitoly nazvané kreatívne .chapters.

.chapters ( counter-reset: chapter; )

Ďalej by sme priradili chapterpočítadlo k prvku pomocou counter-incrementvlastnosti. Keďže ide o kapitoly kníh, použijeme ich na

prvkov za predpokladu, že by názov knihy bol

. Všimnite si, že ho vlastne priraďujeme k :beforepseudoelementu, pretože nám umožňuje pripraviť náš počítadlo pred skutočným

prvok. 
h2:before ( counter-increment: chapter; )

Super, posledná vec, ktorú by sme potrebovali, je povedať pultu, čo by malo zobrazovať. To sa na contentmajetku deje pomocou counter()funkcie. Hodíme trochu farby aj na pult, pretože to design vyžaduje.

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

Hej, vyzeráme dobre!

Ale počkaj! Skutočne nerýpem skutočnosť, že začíname 1. kapitolu. Myslím, že „Forward“ v skutočnosti nie je kapitola. Ak niečo, je to ako v kapitole 0.

To je miesto, kde counter-setprichádza! Nastavme veci tak, aby začínali na nule:

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

Ideme na to! To je lepšie. Len nastavením hodnoty vlastnosti na názov počítadla sme nastavili zoznam kapitol tak, aby sa začínal kapitolou 0. Rovnako ľahko by sa dalo nastaviť, že by sa začínala niečím iným, napríklad kapitolou 100.

A ak prehliadač nepodporuje counter-set? Naozaj nič. To bude jednoducho ignorovať a zoznam bude začínať na svojom predvolenom nastavení 1.

Syntax

( ? )+ | none

Toto je v podstate efektný spôsob, ako povedať, že vlastnosť má názov vlastného počítadla ( ) a začiatočnej hodnoty ( ). Alebo nastaviť nonea číslovanie bude začínať na východzom bode štarte 1.

  • Pôvodná hodnota: none
  • Platí pre: všetky prvky (vrátane nevizuálnych)
  • Zdedené: č
  • Typ animácie: podľa typu vypočítanej 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;

Upozorňujeme, že counter-setak sa názov čítača deklarovaný na ňom ešte nenadefinoval inde, vytvorí sa nové počítadlo.

Podpora prehliadača

IE Hrana Firefox Chrome Safari Opera
Nie Nie 68+ Nie Nie Nie
Android Chrome Android Firefox Prehliadač Android iOS Safari Opera Mini
Nie 79+ Nie Nie Nie
Zdroj: caniuse

Ďalšie čítanie

  • Špecifikácia modulu zoznamov CSS úrovne 3 (pracovný koncept)
  • Zobrazenie aktuálneho kroku s počítadlami CSS
  • Počítanie s počítadlami CSS a mriežkou
  • Ako obrátiť vlastné počítadlá CSS