Modsæt - CSS-tricks

Indholdsfortegnelse:

Anonim

Den counter-setCSS ejendom, tro mod sit navn, sætter start værdi for en CSS tæller. Du ved, hvordan ordnede lister starter ved 1 og derefter øges derfra? Den counter-setegenskab tillader os at sæt, der startværdi til noget andet, siger, -1. Eller 2. Eller 200! Bortset fra at den anvendes på CSS-tællere i stedet for ordnede lister.

Så lad os sige, at vi har en brugerdefineret tæller til en liste over bogkapitler, hvor kapitelnummeret er forudbestemt til kapitelnavnet.

Vi starter med at definere en tæller med counter-resetejendommen. Vi kalder det chapterog definerer det på en overordnet containerklasse til vores kapitler kaldet kreativt .chapters.

.chapters ( counter-reset: chapter; )

Dernæst tildeler vi chaptertælleren til et element ved hjælp af counter-incrementejendommen. Da dette er bogkapitler, anvender vi dem på

elementer, forudsat at bogtitlen er den

. Bemærk, at vi faktisk tildeler det til :beforepseudo-elementet, da det giver os mulighed for at forberede vores tæller med det faktiske

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

Cool, det sidste, vi har brug for, er at fortælle tælleren, hvad den skal vise. Det sker på contentejendommen via counter()funktionen. Vi kaster også lidt farve på tælleren, da designet kræver det.

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

Hej, vi ser godt ud!

Men vent! Jeg graver ikke rigtig det faktum, at vi starter med kapitel 1. Jeg mener, "fremad" er ikke rigtig et kapitel. Hvis det er noget, er det som kapitel 0.

Det er her, der counter-setkommer ind! Lad os indstille tingene til at starte ved nul:

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

Sådan der! Det er bedre. Bare ved at indstille egenskabsværdien til tællerens navn, har vi indstillet listen over kapitler til at starte med kapitel 0. Vi kunne lige så let have indstillet det til at starte med noget andet, som kapitel 100.

Og hvis en browser ikke understøtter counter-set? Ikke rigtig noget. Det vil simpelthen blive ignoreret, og listen starter som standard 1.

Syntaks

( ? )+ | none

Dette er dybest set en fancy måde at sige, at ejendommen tager navnet på en brugerdefineret tæller ( ) og startværdien ( ). Eller sæt det til, noneog nummereringen starter ved standardstartpunktet 1.

  • Startværdi: none
  • Gælder for: alle elementer (inklusive ikke-visuelle)
  • Arvet: nej
  • Animationstype: efter beregnet værditype

Værdier

/* 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;

Bemærk, at counter-setder oprettes en ny tæller, hvis det angivne tællernavn ikke allerede er defineret et andet sted.

Browsersupport

IE Edge Firefox Chrome Safari Opera
Ingen Ingen 68+ Ingen Ingen Ingen
Android Chrome Android Firefox Android-browser iOS Safari Opera Mini
Ingen 79+ Ingen Ingen Ingen
Kilde: caniuse

Yderligere læsning

  • CSS-lister Modulniveau 3-specifikation (arbejdsudkast)
  • Visning af nuværende trin med CSS-tællere
  • Tæller med CSS-tællere og gitter
  • Sådan vendes CSS Custom Counters