Contare gli elementi in pagina con CSS

In uno degli ultimi progetti di Evolve mi è capitato di utilizzare una proprietà CSS che si chiama counter-increment, che uso raramente, così ho pensato che potesse essere una buona idea fare una breve panoramica per chi ancora non la conosce.

Counter-increment è una proprietà che si occupa di aumentare o diminuire un valore, è molto semplice da utilizzare ed è molto utile in quei casi in cui magari non vogliamo o non possiamo creare un contatore via PHP.

Come funziona?

Nella sua implementazione base ci basterà aggiungere counter-increment: contatore; alla classe o elemento che vogliamo contare, per esempio:

h2 {
    counter-increment: contatore;
} 

A questo punto il valore di contatore sarà disponibile e potremo riutilizzarlo per esempio per prependerlo a tutti gli h2 utilizzando la funzione counter():

h2:before {
    content: counter(contatore);
} 

La funzione counter() è incaricata di ritornare il valore di un contatore e può essere utilizzata come counter(contatore) oppure counter(contatore,stile) e supporta gli stessi stili delle liste, ovvero: disc | circle | square | decimal | decimal-leading-zero | lower-roman | upper-roman | lower-greek | lower-latin | upper-latin | armenian | georgian | lower-alpha | upper-alpha | none | inherit.

Un aspetto molto interessante dei contatori è che possono essere circoscritti a diverse aree o contesti utilizzando la proprietà counter-reset che permette di resettare il valore di uno o più contatori a zero o ad un valore predefinito.

Counter-increment può essere influenzato dalla struttura del markup, quindi è importante capire quando è necessario utilizzare counter-reset:

<ul> <li>List item</li> <li>List item</li> <li>List item</li> </ul> 

In questo caso se volessimo contare i li ci basterebbe scrivere:

li {
    counter-increment: contatore-li;
} 

Aggiungendo un altro ul il conteggio dei li ripartirà automaticamente da 0.

Facciamo un altro esempio per capire quando utilizzare la proprietà di counter-reset:

<article>Articolo</article> <article>Articolo</article> <article>Articolo</article> <aside> <article>Articolo</article> <article>Articolo</article> <article>Articolo</article> </aside> 

article {
    counter-increment: conta-articoli;
} article:before {
    content: counter(conta-articoli);
} 

In questo caso il valore del contatore sull’ultimo articolo sarà 6.

Per far si che il conteggio degli article all’interno del nostro elemento aside riparta da 0 dovremo aggiungere la seguente regola:

aside {
    counter-reset: conta-articoli;
} 

Cosa non può fare

Onde evitare fraintendimenti, counter-increment non è disponibile globalmente una volta valorizzato ma è sempre associato all’elemento dove è stato specificato.

Il valore anche se è un intero possiamo considerarlo come una stringa perché non è possibile usarlo all’interno di calc() per delle operazioni.