Motsett - CSS-triks

Innholdsfortegnelse:

Anonim

The counter-setCSS eiendom, tro mot sitt navn, setter startverdi for en CSS teller. Du vet hvordan bestilte lister starter kl. 1 og deretter øker derfra? Den counter-setegenskapen gjør oss til sett som startverdi til noe annet, sier -1. Eller 2. Eller 200! Bortsett fra at den brukes på CSS-tellere i stedet for ordnede lister.

Så la oss si at vi har en egendefinert teller for en liste over bokkapitler, der kapittelnummeret er forhåndsstilt til kapittelnavnet.

Vi begynner med å definere en skranke med counter-reseteiendommen. Vi kaller det chapterog definere det på en forelder beholder klasse for våre kapitler kalt, kreativt, .chapters.

.chapters ( counter-reset: chapter; )

Deretter tildeler vi chaptertelleren til et element ved hjelp av counter-incrementeiendommen. Siden dette er bokkapitler, vil vi bruke dem på

elementer, forutsatt at boktittelen ville være

. Legg merke til at vi faktisk tilordner det til :beforepseudo-elementet siden det lar oss forberede vår motstand mot det faktiske

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

Kult, det siste vi trenger er å fortelle disken hva den skal vise. Det gjøres på contenteiendommen via counter()funksjonen. Vi vil også kaste litt farge på disken siden designet krever det.

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

Hei, vi ser bra ut!

Men vent! Jeg graver ikke egentlig det faktum at vi begynner på kapittel 1. Jeg mener, "Fremover" er egentlig ikke et kapittel. Om noe, er det som kapittel 0.

Det er der counter-setkommer inn! La oss sette ting til å begynne på null:

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

Der går vi! Det er bedre. Bare ved å sette eiendomsverdien til tellernavnet, har vi satt listen over kapitler til å begynne med kapittel 0. Vi kunne like gjerne satt den til å starte på noe annet, som kapittel 100.

Og hvis en nettleser ikke støtter counter-set? Ingenting egentlig. Det vil rett og slett bli ignorert, og listen starter som standard 1.

Syntaks

( ? )+ | none

Dette er i utgangspunktet en fancy måte å si at eiendommen tar navnet på en tilpasset teller ( ) og startverdien ( ). Eller sette den til noneog nummereringen starter på standard startpunktet 1.

  • Opprinnelig verdi: none
  • Gjelder for: alle elementer (inkludert ikke-visuelle)
  • Arvet: nei
  • Animasjonstype: etter beregnet verditype

Verdier

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

Merk at det counter-setvil opprette en ny teller hvis tellernavnet deklarert på det ikke allerede er definert et annet sted.

Nettleserstøtte

DVS Kant Firefox Chrome Safari Opera
Nei Nei 68+ Nei Nei Nei
Android Chrome Android Firefox Android-nettleser iOS Safari Opera Mini
Nei 79+ Nei Nei Nei
Kilde: caniuse

Videre lesning

  • CSS Lists Module Level 3 Specification (Working Draft)
  • Viser nåværende trinn med CSS-tellere
  • Counting With CSS Counters and Grid
  • Hvordan reversere CSS tilpassede tellere