Creare liste ordinate con i contatori CSS

Presentare le informazioni sotto forma di lista permette a chi legge di assimilare le informazioni più velocemente. Inoltre spezza i testi molto lunghi in porzioni di testo più facilmente gestibili, riducendolo all’essenziale e mantenendo alta l’attenzione del lettore.

Anche se spesso vediamo nei siti web lo stile di default nelle liste (esempio 1, 2, 3) questo non significa che non possiamo migliorarlo e renderlo più gradevole. In questo articolo ti farò vedere come customizzare con i CSS le liste HTML in modo da renderle più piacevoli esteticamente.

Codice HTML

Dal momento che è una lista ordinata uso il tag <ol>

Codice HTML per una lista ordinata

CSS

Elimino lo stile di default dichiarando list-style:none sull’<ol>. Le proprietà di stile sono ereditarie quindi questa dichiarazione verrà applicata a tutti gli elementi <li>

A questo punto utilizzo uno speciale tracker numerico chiamato CSS Counter per numerare automaticamente gli elementi tramite CSS.

Per usare il CSS Counter:

  • Inizializzarlo con la proprietà counter-reset
  • Una volta inizializzato, il valore del contatore può essere aumentato o diminuito con counter-increment
  • Il valore del contatore viene visualizzato grazie alla funzione counter() nella proprietà content. Può essere scritto come counter(nome) oppure counter(nome, style)

In questo esempio la dichiarazione è counter-reset:fancy. Fancy è il nome del mio contatore e il valore iniziale è 0 dato che non l’ho dichiarato esplicitamente. Se volessi iniziare la numerazione da 0 e non da 1 dovrei dichiarare counter-reset: fancy -1

A questo punto dichiaro counter-increment:fancy. Questo fa sì che il contatore incrementi di un valore +1 ogni volte che incontra un elemento di tipo <li> e genera una lista ti tipo 1,2,3.

È possibile numerare diversamente gli elementi, ad esempio se avessi dichiarato counter-increment:fancy 2 avrei generato una lista di tipo 2,4,6

Infine l’ultima dichiarazione è content: counter(fancy). In questo modo il numero generato viene mostrato come contenuto vicino al testo dell’elemento <li>

Codice CSS
Anteprima nel browser

Il resto è semplice formattazione tramite CSS:

Codice completo

Ed ecco il risultato finale:

Risultato finale

Ecco il codice completo che puoi trovare su CodePen.io

See the Pen Fancy Ordered List with CSS Counters by Fabrizio Giacosa (@fabriziogiacosa) on CodePen.

Hai trovato utile questo articolo? Fammelo sapere nei commenti 🙂