Counter-set - CSS-trikovi

Sadržaj:

Anonim

counter-setCSS svojstvo, sa svojim imenom, postavlja početne vrijednosti za CSS pulta. Znate li kako poredani popisi počinju od 1, a zatim se odatle povećavaju? counter-setSvojstvo omogućuje nam da skup koji počinje vrijednost na nešto drugo, recimo, -1. Ili 2. Ili 200! Osim što se primjenjuje na CSS brojače umjesto na poredane popise.

Dakle, recimo da imamo prilagođeni brojač za popis poglavlja knjiga, gdje je broj poglavlja dodan imenu poglavlja.

Započeli bismo definiranjem brojača sa counter-resetsvojstvom. Nazvat ćemo ga chapteri definirati u roditeljskoj klasi spremnika za naša poglavlja koja se kreativno nazivaju .chapters.

.chapters ( counter-reset: chapter; )

Dalje, chapterbrojač bismo dodijelili elementu koji koristi counter-incrementsvojstvo. Budući da su ovo poglavlja u knjigama, primijenit ćemo ih na

elementi, pod pretpostavkom da bi naslov knjige bio

. Primijetite da ga zapravo dodjeljujemo :beforepseudo-elementu, jer nam omogućuje da svoj brojač dodamo stvarnom

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

Super, posljednje što bismo trebali je reći brojaču što bi trebao prikazati. To se radi na contentimanju putem counter()funkcije. Bacit ćemo malo boje i na pult, jer dizajn to zahtijeva.

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

Hej, izgledamo dobro!

Ali čekaj! Ne bavim se zapravo činjenicom da započinjemo s 1. poglavljem. Mislim, "Naprijed" zapravo nije poglavlje. Ako ništa, to je poput poglavlja 0.

Tu counter-setdolazi! Postavimo stvari da počnu s nule:

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

Idemo tamo! To je već bolje. Samo postavljanjem vrijednosti svojstva na ime brojača, postavili smo popis poglavlja da započinje u poglavlju 0. Mogli bismo ga jednako lako postaviti da započinje u nečem drugom, poput poglavlja 100.

A ako preglednik ne podržava counter-set? Ništa, stvarno. To će jednostavno biti zanemaren, a popis će početi u svom zadanom 1.

Sintaksa

( ? )+ | none

Ovo je u osnovi fancy način da se kaže da svojstvo uzima naziv prilagođenog brojača ( ) i početnu vrijednost ( ). Ili ga postaviti na nonei brojčano će početi u zadanom polazište, 1.

  • Početna vrijednost: none
  • Odnosi se na: sve elemente (uključujući one koji nisu vizualni)
  • Naslijeđeno: ne
  • Vrsta animacije: prema izračunatoj vrsti vrijednosti

Vrijednosti

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

Imajte na umu da counter-setće stvoriti novi brojač ako na njemu navedeno ime brojača već nije negdje drugdje definirano.

Podrška preglednika

IE Rub Firefox Krom Safari Opera
Ne Ne 68+ Ne Ne Ne
Android Chrome Android Firefox Android preglednik iOS Safari Opera Mini
Ne 79+ Ne Ne Ne
Izvor: caniuse

Daljnje čitanje

  • Specifikacija modula CSS popisa razine 3 (radni nacrt)
  • Prikaz trenutnog koraka s CSS brojačima
  • Brojanje pomoću CSS brojača i rešetke
  • Kako obrnuti CSS prilagođene brojače