Vastukomplekt - CSS-trikid

Lang L: none (table-of-contents):

Anonim

counter-setCSS vara, truuks oma nimi, seab alustades raha CSS counter. Teate, kuidas tellitud loendid algavad 1-st ja siis kasvavad sealt ülespoole? counter-setVara võimaldab meil määrata, mis algavad väärtus midagi muud öelda, -1. Või 2. Või 200! Välja arvatud see, et seda rakendatakse järjestatud loendite asemel CSS-loenduritele.

Oletame, et meil on raamatupeatükkide loendi jaoks kohandatud loendur, kus peatüki number on peatüki nimele lisatud.

Alustaksime counter-resetkinnistuga loenduri määratlemisest . Nimetame seda chapterja määratleme selle vanemate konteinerite klassis oma peatükkide jaoks, mida nimetatakse loominguliselt .chapters.

.chapters ( counter-reset: chapter; )

Järgmisena määrame chapterloenduri counter-incrementatribuudi abil elemendile . Kuna need on raamatupeatükid, siis rakendame neid ka

eeldades, et raamatu pealkiri oleks

. Pange tähele, et omistame selle tegelikult :beforepseudoelemendile, kuna see võimaldab meil oma loendurit tegelikule ette seada

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

Lahe, viimane asi, mida vajame, on öelda loendurile, mida see peaks kuvama. Seda tehakse contentkinnistul counter()funktsiooni kaudu . Viskame ka natuke värve letti, kuna disain seda nõuab.

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

Hei, me näeme head välja!

Aga oota! Ma ei kaeva tegelikult seda, et alustame 1. peatükiga. Ma mõtlen, et “Edasi” pole tegelikult peatükk. Kui midagi, siis on see nagu 0. peatükk.

Seal counter-settuleb sisse! Paneme asjad algama nullist:

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

Seal me läheme! See on parem. Lihtsalt määrates atribuudi väärtuseks loenduri nime, oleme seadnud peatükkide loendi alustama peatükist 0. Võiksime sama hõlpsalt seada selle alguse millegi muuga, näiteks peatükiga 100.

Ja kui brauser ei toeta counter-set? Tegelikult mitte midagi. See lihtsalt ignoreeritakse ja nimekiri hakkab oma vaikimisi 1.

Süntaks

( ? )+ | none

Põhimõtteliselt on see väljamõeldud viis öelda, et vara võtab kohandatud loenduri nime ( ) ja algväärtuse ( ). Või seadke see väärtusele noneja numeratsioon algab vaikimisi alguspunktist 1.

  • Algne väärtus: none
  • Kehtib kõigi elementide (sh mittevisuaalsete) kohta
  • Päritud: ei
  • Animatsiooni tüüp: arvutatud väärtuse tüübi järgi

Väärtused

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

Pange tähele, et counter-setsee loob uue loenduri, kui sellel deklareeritud loenduri nimi pole veel kusagil mujal määratletud.

Brauseri tugi

IE Edge Firefox Chrome Safari Ooper
Ei Ei 68+ Ei Ei Ei
Android Chrome Android Firefox Androidi brauser iOS-i Safari Opera Mini
Ei 79+ Ei Ei Ei
Allikas: caniuse

Lisalugemist

  • CSS-i loendite mooduli 3. taseme spetsifikatsioon (töö mustand)
  • Praeguse sammu kuvamine CSS-loenduritega
  • Loendamine CSS-loendurite ja võrguga
  • Kuidas muuta CSS-i kohandatud loendureid