Tegenstel - CSS-trucs

Inhoudsopgave:

Anonim

De counter-setCSS-eigenschap, trouw aan zijn naam, stelt de startwaarde in voor een CSS-teller. Weet u hoe geordende lijsten beginnen bij 1 en vanaf daar worden verhoogd? Met de counter-seteigenschap kunnen we die startwaarde op iets anders instellen, bijvoorbeeld -1. Of 2. Of 200! Behalve dat het wordt toegepast op CSS-tellers in plaats van geordende lijsten.

Laten we dus zeggen dat we een aangepaste teller hebben voor een lijst met boekhoofdstukken, waarbij het hoofdstuknummer wordt toegevoegd aan de hoofdstuknaam.

We zouden beginnen met het definiëren van een loket met het counter-resetpand. We noemen het chapteren definiëren het op een bovenliggende containerklasse voor onze hoofdstukken genaamd, creatief .chapters.

.chapters ( counter-reset: chapter; )

Vervolgens zouden we de chapterteller aan een element toewijzen met behulp van de counter-incrementeigenschap. Aangezien dit hoofdstukken uit boeken zijn, zullen we ze daarop toepassen

elementen, ervan uitgaande dat de titel van het boek de

​ Merk op dat we het feitelijk aan het :beforepseudo-element toewijzen, aangezien het ons in staat stelt om onze teller voor het werkelijke te plaatsen

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

Cool, het laatste dat we nodig hebben, is de toonbank vertellen wat hij moet weergeven. Dat gebeurt op het contentterrein via de counter()functie. We gooien ook een beetje kleur op het aanrecht, omdat het ontwerp daarom vraagt.

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

Hé, we zien er goed uit!

Maar wacht! Ik ben niet echt aan het graven dat we aan hoofdstuk 1 beginnen. Ik bedoel, de "Vooruit" is niet echt een hoofdstuk. Als er iets is, is het net als hoofdstuk 0.

Dat is waar counter-setkomt binnen! Laten we de dingen instellen om bij nul te beginnen:

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

Daar gaan we! Dat is beter. Alleen al door de eigenschapswaarde in te stellen op de naam van de teller, hebben we de lijst met hoofdstukken zo ingesteld dat deze begint bij hoofdstuk 0. We hadden net zo gemakkelijk kunnen beginnen met iets anders, zoals hoofdstuk 100.

En als een browser dit niet ondersteunt counter-set? Eigenlijk niets. Het wordt gewoon genegeerd en de lijst begint met de standaardwaarde 1.

Syntaxis

( ? )+ | none

Dit is eigenlijk een mooie manier om te zeggen dat de eigenschap de naam aanneemt van een aangepaste teller ( ) en de beginwaarde ( ). Of zet deze op noneen de nummering start op het standaard uitgangspunt, 1.

  • Beginwaarde: none
  • Is van toepassing op: alle elementen (inclusief niet-visuele)
  • Overgenomen: nee
  • Animatietype: op type berekende waarde

Waarden

/* 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 op dat counter-seter een nieuwe teller zal worden aangemaakt als de tellernaam die erop is gedeclareerd, nog niet ergens anders is gedefinieerd.

Browser-ondersteuning

D.W.Z Rand Firefox Chrome Safari Opera
Nee Nee 68+ Nee Nee Nee
Android Chrome Android Firefox Android-browser iOS Safari Opera Mini
Nee 79+ Nee Nee Nee
Bron: caniuse

Verder lezen

  • CSS-lijsten Module Level 3 Specification (Working Draft)
  • Huidige stap weergeven met CSS-tellers
  • Tellen met CSS-tellers en raster
  • Hoe CSS aangepaste tellers om te keren