Ellenszett - CSS-trükkök

Tartalomjegyzék:

Anonim

A counter-setCSS tulajdonság, nevéhez hűen, beállítja a CSS számláló kezdőértékét. Tudja, hogy a rendezett listák 1-től kezdődnek, majd onnan növekednek? A counter-settulajdonság lehetővé teszi számunkra, hogy ezt a kiindulási értéket valami másra állítsuk, mondjuk -1-re. Vagy 2. Vagy 200! Kivéve, hogy a CSS számlálókra alkalmazzák a rendezett listák helyett.

Tehát tegyük fel, hogy van egy egyéni számlálónk a könyvfejezetek listájához, ahol a fejezetszámot a fejezetnév elé kell tenni.

Kezdjük azzal, hogy meghatározunk egy számlálót az counter-resetingatlannal. Felhívjuk chapterés meghatározzuk egy szülőtároló osztályon a kreatív módon hívott fejezeteinkhez .chapters.

.chapters ( counter-reset: chapter; )

Ezután chaptera counter-incrementtulajdonságot használva hozzárendelnénk a számlálót egy elemhez . Mivel ezek könyvfejezetek, alkalmazzuk őket

elemeket feltételezve, hogy a könyv címe lenne az

. Figyeljük meg, hogy tulajdonképpen az álelemhez rendeljük, :beforemivel ez lehetővé teszi számunkra, hogy a számlálónkat előre beállítsuk a ténylegeshez

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

Remek, az utolsó dolog, amire szükségünk lenne, meg kell mondanunk a számlálónak, hogy mit kell megjelenítenie. Ez a contenttulajdonságon keresztül történik a counter()funkción keresztül . Dobunk egy kis színt a pultra is, mivel a tervezés megköveteli.

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

Hé, jól nézünk ki!

De várj! Nem igazán kutatom, hogy az 1. fejezetből indulunk ki. Úgy értem, hogy az „Előre” valójában nem egy fejezet. Ha valami, olyan, mint a 0. fejezet.

Ott counter-setjön be! Állítsuk be a dolgokat nullára:

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

Tessék! Ez jobb. Csak úgy, hogy a tulajdonság értékét a számláló nevére állítjuk, beállítottuk a fejezetek listáját a 0. fejezetnél kezdődővé. Ugyanolyan könnyen beállíthatnánk, hogy valami másnál kezdődjön, például a 100. fejezetnél.

És ha egy böngésző nem támogatja counter-set? Semmi különös. Ez egyszerűen figyelmen kívül hagyja, és a lista indul az alapértelmezett, 1.

Szintaxis

( ? )+ | none

Ez alapvetően divatos módja annak, hogy azt mondjuk, hogy a tulajdonság felveszi az egyéni számláló nevét ( ) és a kiindulási értéket ( ). Vagy állítsd be none, és a számozás indul az alapértelmezett kiindulási pont, 1.

  • Kezdő érték: none
  • Alkalmazható: minden elem (beleértve a nem vizuális is)
  • Örökölt: nem
  • Animáció típusa: kiszámított értéktípus szerint

Értékek

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

Vegye figyelembe, hogy counter-setakkor jön létre egy új számláló, ha a rajta deklarált számláló nevét még nem definiálták valahol másutt.

Böngésző támogatás

AZAZ Él Firefox Króm Szafari Opera
Nem Nem 68+ Nem Nem Nem
Android Chrome Android Firefox Android böngésző iOS Safari Opera Mini
Nem 79+ Nem Nem Nem
Forrás: caniuse

További irodalom

  • CSS listák 3. szintű modul specifikáció (Munka tervezet)
  • Jelenlegi lépés megjelenítése CSS számlálókkal
  • Számolás CSS számlálókkal és rácsokkal
  • A CSS egyéni számlálók megfordítása