3.63
In questo articolo esploreremo l’uso dei CSS per stilizzare i numeri di una lista ordinata (ol), conferendo loro maggiore rilevanza o adattando il loro stile alla pagina.
Applicheremo uno sfondo rosso, un colore bianco e il grassetto ai numeri.
Per raggiungere questo obiettivo, dobbiamo separare la formattazione del numero/marcatore da quella del contenuto/valore dell’elemento di lista. La soluzione è derivata da un articolo di Roger Johansson, e vediamo ora come implementare la tecnica.
Il markup HTML iniziale è il seguente:
<ol> <li>Lorem ipsum</li> <li>Dolor sit amet</li> <li>Consectetur adipisicing elit</li> <li>Ut labore et dolore magna aliqua</li> </ol> Il codice CSS inizia definendo alcune regole per l’elemento ol:
ol { counter-reset: lista; margin-left: 0; padding-left: 0;
} La regola chiave è counter-reset, utilizzata per creare e inizializzare un contatore denominato “lista”. Questo contatore ci permette di aggiungere numeri automatici agli elementi HTML desiderati. Eliminiamo il margine e il padding predefiniti con margin-left: 0 e padding-left: 0 per evitare indentazioni indesiderate.
Passiamo ora agli elementi della lista (selezionati con il selettore di figli ‘>’):
ol > li { list-style: none; position: relative; margin: 0 0 10px 20px; padding: 4px 8px;
} Due regole cruciali in questo caso: con list-style: none eliminiamo il marcatore predefinito, disabilitando la numerazione essendo una lista ordinata. Con position: relative creiamo un contesto per il posizionamento assoluto del contatore.
A questo punto, la lista appare così:
Figura 3. Lista ordinata senza numeri Screenshot
Utilizziamo ora il contenuto generato per aggiungere automaticamente i numeri corretti prima (:before) di ciascun elemento li:
ol > li:before { /* Utilizza il contatore per aggiungere la numerazione automatica */ content: counter(lista); counter-increment: lista; /* Posiziona e formatta il numero */ position: absolute; top: 0px; left: -25px; width: 25px; padding: 2px; color: #fff; background: #b0260d; font-weight: bold; text-align: center;
} Questo blocco di codice è diviso in due parti: nella prima, utilizziamo le regole per la numerazione degli elementi della lista. Il contenuto generato attraverso content è il contatore “lista” che abbiamo inizializzato in precedenza. Con counter-increment: lista incrementiamo automaticamente il contatore di 1.
Per rendere la formattazione del numero/marcatore indipendente da quella del contenuto/valore, abbiamo eliminato la numerazione standard con list-style: none, recuperandola come contenuto generato con il contatore.
Nella seconda parte del blocco, impostiamo il posizionamento e gli stili di formattazione dei numeri. I valori devono essere personalizzati in base alle esigenze e all’effetto visivo desiderato.
Riassumendo tutto il codice CSS con le parti fondamentali evidenziate nei commenti:
ol { counter-reset: lista; /* [!] Inizializza il contatore */ margin-left: 0; /* Rimuove il margine sinistro */ padding-left: 0; /* Rimuove il padding sinistro */ } ol > li { list-style: none; /* [!] Disabilita la numerazione degli elementi della lista */ position: relative; /* [!] Crea un contesto per il posizionamento */ margin: 0 0 10px 20px; /* Imposta un margine sinistro per lasciare spazio ai numeri */ padding: 4px 8px;
} ol > li:before { content: counter(lista); /* [!] Usa il contatore come contenuto */ counter-increment: lista; /* [!] Incrementa il contatore di 1 */ /* Posiziona e formatta il numero */ position: absolute; top: 0px; left: -25px; width: 25px; padding: 2px; color: #fff; background: #b0260d; font-weight: bold; text-align: center;
} Questa tecnica funziona su tutti i browser più recenti, ma non su IE7, poiché questa versione non supporta il contenuto generato. Per ovviare a ciò, è possibile utilizzare lo script IE8.js di Dean Edwards, che, attraverso JavaScript, aggiunge a IE6/7 le funzionalità CSS supportate da IE8.