CSS: contatori

I contatori CSS sono una potente caratteristica del contenuto generato. Essi permettono di aggiungere un sistema di numerazione a tutti gli elementi di una pagina. Le proprietà CSS interessate sono cinque: counter-reset (inizializza un contatore su un elemento), counter-increment (incrementa il contatore su un elemento), counter() (inserisce un singolo contatore su un elemento), counters() (inserisce più contatori su più elementi) e content() (visualizza il contenuto generato e i contatori prima o dopo il contenuto di un elemento, a seconda se vengano utilizzati gli pseudo-elementi :before o :after). Vediamo due esempi.

counter() e counters() sono più precisamente funzioni CSS. Di seguito il loro utilizzo.

Usare counter()

Si supponga di avere la seguente marcatura:

<ol>
  <li>Voce</li>
  <li>Voce</li>
  <li>
  	 <ol>
  	 	<li>Voce</li>
  	 	<li>Voce</li>
  	 	<li>
  	 		<ol>
  	 			<li>Voce</li>
  	 			<li>Voce</li>
  	 		</ol>
  	 	</li>
  	 </ol>
  </li>
</ol>

Vogliamo visualizzare dei contatori secondo un ordine di annidamento progressivo (1, 1.1, 1.1.1 eccetera). Inoltre vogliamo che il primo livello di contatori sia visualizzato tra parentesi tonde, il secondo tra parentesi quadre e il terzo tra parentesi graffe. La procedura da utilizzare è la seguente:

1. Eliminiamo i marcatori di lista e impostiamo un primo contatore sulla lista più esterna:

   
   ol {
   	list-style: none;
   	counter-reset: counter1;
   }
   

2. Incrementiamo il contatore e lo inseriamo prima di ciascuna voce di lista formattandolo come specificato sopra:

   
   ol li:before {
   	counter-increment: counter1;
   	content: '('counter(counter1)') ';
   }
   

3. Impostiamo un secondo contatore sul secondo livello di annidamento delle liste:

   
   ol li ol {
   	counter-reset: counter2;
   }
   

4. Incrementiamo questo contatore e lo inseriamo prima di ciascuna voce di lista, visualizzandolo dopo il primo contatore e formattandolo come specificato sopra:

   
   ol li ol li:before {
   	counter-increment: counter2;
   	content: '['counter(counter1)'.'counter(counter2)'] ';
   }
   

5. Impostiamo un terzo contatore sul terzo livello di annidamento delle liste:

   
   ol li ol li ol {
   	counter-reset: counter3;
   }
   

6. Incrementiamo questo contatore e lo inseriamo prima di ciascuna voce di lista, visualizzandolo dopo il secondo contatore e formattandolo come specificato sopra:

   
   ol li ol li ol li:before {
   
   	counter-increment: counter3;
   	content: '{'counter(counter1)'.'counter(counter2)'.'counter(counter3)'} ';
   
   }
   

La proprietà content accetta una stringa come suo valore e la tratta in modo letterale. Quindi la stringa ' ' verrà trattata come uno spazio aggiuntivo. In questa proprietà le stringhe che non sono il risultato di una funzione CSS vanno inserite tra virgolette.

counters()

counters() è una funzione CSS che accetta due parametri (obbligatori): il primo è un riferimento a un contatore e il secondo è una stringa da utilizzare come separatore tra i valori. Questa funzione genera automaticamente tutti i contatori annidati che invece devono essere creati manualmente con counter(). Avendo la seguente marcatura:

<ul>
  <li>Voce</li>
  <li>Voce</li>
  <li>
    <ul>
    
     <li>Voce</li>
  	 <li>Voce</li>
  	 
  	 <li>
  	   <ul>
  	 	 <li>Voce</li>
  	 	<li>Voce</li>
  	   </ul>
  	 
  	 </li> 
    
    </ul>
  </li>

</ul>

possiamo usare la funzione counters() in questo modo:

ul {
	counter-reset: counter;
	list-style: none;
}

ul li:before {
	counter-increment: counter;
	content: counters(counter, '. ') ' ';
}

Questo genererà automaticamente la numerazione 1, 1.1, 1.1.1 e così via. Come si può notare, non abbiamo più tre contatori, ma uno solo. Potete vedere gli esempi finali in questa pagina.