Contra-set - CSS-Tricks

Cuprins:

Anonim

Proprietatea counter-setCSS, fidelă numelui său, stabilește valoarea de pornire pentru un contor CSS. Știți cum listele ordonate încep de la 1 și apoi cresc de acolo? counter-setProprietatea ne permite sa stabilit ca valoarea de pornire la altceva, să zicem, -1. Sau 2. Sau 200! Cu excepția faptului că este aplicat contoarelor CSS în locul listelor ordonate.

Deci, să presupunem că avem un contor personalizat pentru o listă de capitole de carte, în care numărul capitolului este precedat de numele capitolului.

Am începe prin a defini un contor cu counter-resetproprietatea. O vom apela chapterși o vom defini într-o clasă de containere părinte pentru capitolele noastre numite, în mod creativ .chapters.

.chapters ( counter-reset: chapter; )

Apoi, am atribui chaptercontorul unui element folosind counter-incrementproprietatea. Deoarece acestea sunt capitole de carte, le vom aplica

elemente, presupunând că titlul cărții ar fi

. Observați că îl atribuim de fapt :beforepseudo-elementului, deoarece ne permite să ne prelungim contorul cu cel real

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

Super, ultimul lucru de care am avea nevoie este să spunem ghișeului ce ar trebui să afișeze. Aceasta se face pe contentproprietate prin intermediul counter()funcției. Vom arunca o mică culoare și pe tejghea, deoarece designul necesită acest lucru.

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

Hei, arătăm bine!

Dar asteapta! Nu sap cu adevărat faptul că începem de la capitolul 1. Adică, „Înainte” nu este chiar un capitol. Dacă este ceva, este ca Capitolul 0.

Acolo counter-setintra! Să setăm lucrurile să înceapă de la zero:

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

Iată-ne! Asa e mai bine. Doar prin setarea valorii proprietății la numele contorului, am stabilit lista de capitole pentru a începe de la capitolul 0. Am putea să o setăm la fel de ușor să înceapă la altceva, cum ar fi capitolul 100.

Și dacă un browser nu acceptă counter-set? Nimic adevărat. Acesta va fi pur și simplu ignorat și lista va începe la valoarea implicită 1,.

Sintaxă

( ? )+ | none

Acesta este în esență un mod fantezist de a spune că proprietatea ia numele unui contor personalizat ( ) și valoarea inițială ( ). Sau setați-l la noneși numerotarea va începe la punctul de plecare implicit 1,.

  • Valoarea initiala: none
  • Se aplică la: toate elementele (inclusiv cele non-vizuale)
  • Moștenit: nu
  • Tipul animației: după tipul valorii calculate

Valori

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

Rețineți că counter-setva crea un contor nou dacă numele contorului declarat pe acesta nu a fost deja definit în altă parte.

Suport pentru browser

IE Margine Firefox Crom Safari Operă
Nu Nu Peste 68 de ani Nu Nu Nu
Android Chrome Android Firefox Browser Android Safari iOS Opera mini
Nu Peste 79 de ani Nu Nu Nu
Sursa: caniuse

Lecturi suplimentare

  • Specificații pentru modulul listelor CSS de nivel 3 (schiță de lucru)
  • Se afișează pasul curent cu contoare CSS
  • Numărare cu contoare CSS și grilă
  • Cum se inversează contoare personalizate CSS