Motuppsättning - CSS-tricks

Innehållsförteckning:

Anonim

Den counter-setCSS egendom, precis som namnet sätter startvärde för en CSS räknare. Du vet hur beställda listor börjar vid 1 och sedan ökar därifrån? Den counter-setegenskapen ger oss möjlighet att uppsättning som startvärde till något annat, säger, -1. Eller 2. Eller 200! Förutom att den tillämpas på CSS-räknare istället för ordnade listor.

Så, låt oss säga att vi har en anpassad räknare för en lista över bokkapitel, där kapitelnumret är förberett till kapitelnamnet.

Vi skulle börja med att definiera en räknare med counter-resetfastigheten. Vi kallar det chapteroch definierar det på en överordnad behållarklass för våra kapitel som kallas kreativt .chapters.

.chapters ( counter-reset: chapter; )

Därefter tilldelar vi chapterräknaren till ett element med hjälp av counter-incrementegenskapen. Eftersom det här är bokkapitel kommer vi att tillämpa dem på

element, förutsatt att bokens titel skulle vara

. Lägg märke till att vi faktiskt tilldelar det till :beforepseudo-elementet eftersom det tillåter oss att förbereda vår räknare till det faktiska

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

Cool, det sista vi skulle behöva är att berätta för disken vad den ska visa. Det görs på contentfastigheten via counter()funktionen. Vi slänger också lite färg på disken eftersom designen kräver det.

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

Hej, vi ser bra ut!

Men vänta! Jag gräver inte riktigt det faktum att vi börjar med kapitel 1. Jag menar, "Framåt" är inte riktigt ett kapitel. Om något är det som kapitel 0.

Det är där counter-setkommer in! Låt oss ställa in saker så att de börjar vid noll:

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

Där vi går! Det är bättre. Bara genom att ställa in egenskapens värde till räknarens namn har vi ställt in kapitelistan så att de börjar vid kapitel 0. Vi kan lika enkelt ha ställt in det på något annat, som kapitel 100.

Och om en webbläsare inte stöder counter-set? Ingenting egentligen. Det kommer helt enkelt att ignoreras och listan börjar som standard 1.

Syntax

( ? )+ | none

Detta är i princip ett snyggt sätt att säga att egenskapen tar namnet på en anpassad räknare ( ) och startvärdet ( ). Eller sätt det till noneoch numreringen börjar vid standardstartpunkten 1.

  • Ursprungligt värde: none
  • Gäller för: alla element (inklusive icke-visuella)
  • Ärvt: nej
  • Animationstyp: efter beräknad värdetyp

Värden

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

Observera att det counter-setkommer att skapa en ny räknare om räknarens namn som anges på den inte redan har definierats någon annanstans.

Webbläsarstöd

IE Kant Firefox Krom Safari Opera
Nej Nej 68+ Nej Nej Nej
Android Chrome Android Firefox Android-webbläsare iOS Safari Opera Mini
Nej 79+ Nej Nej Nej
Källa: caniuse

Vidare läsning

  • CSS-listor Modul nivå 3 Specifikation (arbetsutkast)
  • Visar nuvarande steg med CSS-räknare
  • Räkna med CSS-räknare och rutnät
  • Hur man gör om CSS anpassade räknare