Contro-set - Trucchi CSS

Sommario:

Anonim

La counter-setproprietà CSS, fedele al suo nome, imposta il valore iniziale per un contatore CSS. Sai come gli elenchi ordinati iniziano da 1 e poi aumentano da lì? La counter-setproprietà ci consente di impostare quel valore iniziale su qualcos'altro, ad esempio -1. Oppure 2. Oppure 200! Tranne che viene applicato ai contatori CSS invece che agli elenchi ordinati.

Quindi, supponiamo di avere un contatore personalizzato per un elenco di capitoli di libri, in cui il numero del capitolo è anteposto al nome del capitolo.

Inizieremo definendo un contatore con la counter-resetproprietà. Lo chiameremo chaptere definiamo su una classe contenitore padre per i nostri capitoli detti, in modo creativo, .chapters.

.chapters ( counter-reset: chapter; )

Successivamente, assegneremo il chaptercontatore a un elemento utilizzando la counter-incrementproprietà. Poiché questi sono capitoli di libri, li applicheremo a

elementi, supponendo che il titolo del libro sia il file

. Si noti che in realtà lo stiamo assegnando allo :beforepseudo-elemento poiché ci consente di anteporre il nostro contatore all'effettivo

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

Bene, l'ultima cosa di cui avremmo bisogno è dire al contatore cosa dovrebbe mostrare. Viene fatto sulla contentproprietà tramite la counter()funzione. Getteremo anche un po 'di colore sul bancone poiché il design lo richiede.

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

Ehi, stiamo bene!

Ma aspetta! Non sto davvero scavando il fatto che stiamo iniziando dal Capitolo 1. Voglio dire, "Avanti" non è davvero un capitolo. Se non altro, è come il capitolo 0.

Ecco dove counter-setentra in gioco! Impostiamo le cose in modo che inizino da zero:

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

Ci siamo! Va meglio. Semplicemente impostando il valore della proprietà sul nome del contatore, abbiamo impostato l'elenco dei capitoli in modo che inizi dal Capitolo 0. Avremmo potuto impostare altrettanto facilmente che inizi da qualcos'altro, come il capitolo 100.

E se un browser non supporta counter-set? Niente. Si viene semplicemente ignorato e la lista avrà inizio al suo valore predefinito, 1.

Sintassi

( ? )+ | none

Questo è fondamentalmente un modo elegante per dire che la proprietà prende il nome di un contatore personalizzato ( ) e il valore iniziale ( ). O impostarlo nonee la numerazione inizierà dal punto di partenza di default, 1.

  • Valore iniziale: none
  • Si applica a: tutti gli elementi (inclusi quelli non visivi)
  • Ereditato: no
  • Tipo di animazione: per tipo di valore calcolato

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;

Si noti che counter-setcreerà un nuovo contatore se il nome del contatore dichiarato su di esso non è già stato definito altrove.

Supporto del browser

IE Bordo Firefox Cromo Safari musica lirica
No No 68+ No No No
Android Chrome Android Firefox Browser Android iOS Safari Opera Mini
No 79+ No No No
Fonte: caniuse

Ulteriore lettura

  • Specifica CSS Elenca Livello 3 del modulo (bozza di lavoro)
  • Visualizzazione del passaggio corrente con contatori CSS
  • Conteggio con contatori CSS e griglia
  • Come invertire i contatori personalizzati CSS