In questo articolo impareremo a formattare attraverso i CSS i numeri di una lista ordinata (ol) per dare ad essi una maggiore enfasi o per adeguarne in qualche modo lo stile a quello della nostra pagina. Trasformeremo questa lista:
dando ai numeri uno sfondo rosso, un colore bianco e il grassetto per il testo, fino a ottenere questo risultato:
Per raggiungere lo scopo che ci siamo prefissi dovremo riuscire in qualche modo a svincolare la formattazione del numero/marcatore da quella del contenuto/valore dell'item di lista.
La soluzione ci viene da questo articolo pubblicato a suo tempo sul suo blog da Roger Johansson. Vediamo subito come funziona la tecnica.
Il markup HTML di partenza è questo:
<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 con la definizione di una serie di regole per l'elemento ol:
ol {
counter-reset:lista;
margin-left:0;
padding-left:0;
}La regola fondamentale è la prima. Usiamo la proprietà counter-reset dei CSS per creare e inizializzare un contatore. Attraverso un contatore possiamo aggiungere una numerazione automatica agli elementi HTML che ci interessano. Assegniamo al nostro contatore l'identificativo lista.
Con margin-left:0 e padding-left:0 eliminiamo il margine e il padding che di default sono aggiunti dai browser quando si definisce una lista in modo che essa appaia indentata.
Ora passiamo a lavorare sugli item di lista (per selezionarli usiamo il selettore di figli '>'):
ol > li {
list-style:none;
position:relative;
margin:0 0 10px 20px;
padding:4px 8px;
}Due in questo caso le regole cruciali. Con list-style:none eliminiamo il marcatore dei li. Essendo la lista ordinata, disabilitiamo di fatto la numerazione.
Con position:relative creiamo invece un contesto per il posizionamento assoluto del contatore (ci arriviamo tra un attimo).
Margini e padding li impostiamo a piacimento, ma attenzione al valore per il margine sinistro (20px nell'esempio) perché influisce sul posizionamento dei numeri, definiamolo sempre, dunque, badando che il valore sia adeguato alle nostre esigenze.
Giunti a questo punto la nostra lista ha questo aspetto:
Ora useremo il contenuto generato per aggiungere automaticamente prima (:before) di ciascun li i numeri giusti:
ol > li:before {
/* Usare il contatore per aggiungere la numerazione automatica */
content:counter(lista);
counter-increment:lista;
/* Posizionare e formattare il numero */
position:absolute;
top:0px;
left:-25px;
width:25px;
padding:2px;
color:#fff;
background:#b0260d;
font-weight:bold;
text-align:center;
}Il blocco di codice è suddiviso in due sezioni.
Nella prima, quella più importante, impostiamo le regole relative alla numerazione degli item di lista. Come contenuto generato inseriamo attraverso la proprietà content il contatore lista che abbiamo inizializzato in precedenza. Con counter-increment:lista facciamo sì che il contatore automatico venga incrementato di 1 (è il valore di default, per cui non è necessario esprimere il valore dopo l'identificativo del contatore).
Ecco, ora l'espressione svincolare la formattazione del numero/marcatore da quella del contenuto/valore dell'item di lista dovrebbe risultare più chiara. Cosa abbiamo fatto? Abbiamo eliminato la numerazione standard della lista con list-style:none, recuperandola come contenuto generato con il contatore! Così facendo, però, possiamo operare con i CSS in maniera indipendente sul numero e sul testo del list item.
Nella seconda sezione del blocco di codice visto qui sopra, dunque, passiamo a impostare il posizionamento e gli stili di formattazione dei numeri. I valori andranno impostati in base alle proprie esigenze e all'effetto visuale che si vuole ottenere.
Riportiamo per comodità tutto il codice CSS evidenziando con un [!] nei commenti le parti fondamentali:
ol {
counter-reset:lista; /* [!] Initializza 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 item di lista */
position:relative; /* [!] Crea un contesto per il posizionamento */
margin:0 0 10px 20px; /* Assegniamo un margine sinistro per fare 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 */
/* Posizionare e formattare il numero */
position:absolute;
top:0px;
left:-25px;
width:25px;
padding:2px;
color:#fff;
background:#b0260d;
font-weight:bold;
text-align:center;
}La tecnica funziona su tutti i browser più recenti. Non su IE7 perché quella versione del programma di Microsoft non supporta il contenuto generato. Per ovviare si può usare lo script IE8.js di Dean Edwards che tramite Javascript aggiunge a IE6/7 le funzionalità CSS supportate invece da IE8.
