Liste con marcatori perfetti

Chi ci ha provato lo sa: posizionare in maniera consistente e cross-browser un'icona o
un marcatore grafico personalizzato nelle liste non è cosa semplice, soprattutto per
come i diversi browser trattano margini e padding di liste e list-item. Inoltre,
la proprietà list-style-image che consente di specificare il marcatore
grafico delle liste offre risultati poco soddisfacenti, dato che il più delle volte
il bullet non risulta perfettamente allineato con il testo.

Le cose si complicano ancora di più se il testo delle nostre liste usa un dimensionamento
relativo, sia esso in em o in percentuale. Ci sono soluzioni efficaci e cross-browser
anche in questo caso? Le scopriremo in questo articolo attraverso tre esempi. Cominciamo subito.

Bullet grafici su list-item con una riga sola

Ecco il nostro primo esempio: una lista con un'icona centrata. Come si può notare, ridimensionando
il testo del browser, l'icona resta centrata. Questa tecnica impone però un vincolo: ciascun
elemento della lista dovrà occupare al massimo una riga. Dopo aver attribuito la classe "icon"
alle liste a cui vorremo attribuire il marcatore grafico, basteranno poche regole CSS.

Per prima cosa eliminiamo il disco, margini e padding da lista e list-item:

Attribuiamo quindi una larghezza alla lista. Nel caso dell'esempio
ho definito un valore pari a 15em, che dovrebbe essere all'incirca 30 caratteri, ma ovviamente si possono
usare pixel o altre unità di misura:

Infine definiamo le proprietà sui list-item: dopo aver dichiarato un'altezza di linea
adeguata, assegneremo un padding sinistro di 12px così da poter lasciare spazio all'icona
(che è 8x8) che verrà specificata attraverso la proprietà background:

Il primo esempio è così ultimato: sono bastate poche
semplici dichiarazioni. Da notare che nella pagina ho predisposto anche una lista con una
personalizzazione CSS davvero minima, così da evidenziare come si è tra l'altro messo
a punto l'allineamento orizzontale con altri elementi e margini/padding della lista
di base. Il risultato è soddisfacente, quello che vorremmo è però non avere il limite
di una riga sola, che verrà superato nei prossimi due esempi.

Liste con marcatore grafico interno

Nel secondo esempio viene definito un bullet grafico
interno, ad emulare quindi la dichiarazione list-style-position:inside
della lista di base presentata sotto l'esempio chiave. La tecnica usata è tanto semplice quanto efficace,
l'ho trovata di recente ben documentata in questo articolo.
Ma vediamo passo passo le regole dell'esempio.

Per prima cosa si eliminano margini, padding e marcatore da lista e list-item e si
assegna una larghezza alla lista non ordinata come abbiamo fatto nell'esempio precedente:

Siamo così arrivati alla regola centrale,
ovvero quella sui list-item. La regola di per sé non è complessa, ma concettualmente densa. Si tratta infatti
di:

1. specificare padding verticale (superiore in particolare) pari alla metà dell'icona;
2. posizionare l'icona a metà del line-height sull'asse verticale;
3. assegnare un text-indent almeno quanto la larghezza dell'icona così da lasciare spazio
   sulla sinistra della prima riga di testo;
4. specificare margine superiore negativo pari alla metà dell'icona così da compensare il padding (facoltativo).

In questo caso l'icona è di 8x8 pixel, vediamo la regola per intero:

Il punto chiave è specificare per il background una posizione verticale in em pari
almeno alla metà del line-height dopo aver definito un padding superiore pari alla metà dell'icona
(così che essa appaia centrata rispetto al testo), in modo da avere un marcatore che si adatta
perfettamente a qualsiasi dimensione del testo.

Piccola nota pratica: se vorrete definire un margine superiore negativo per compensare il padding,
è importante bilanciarlo con un padding-bottom, così come ho fatto nell'esempio.
Siamo ora pronti a procedere con il terzo esempio.

Liste con marcatore grafico esterno

Eccoci quindi giunti al terzo esempio, in cui il marcatore è
esterno, ad emulare list-style-position: outside. Le variazioni rispetto
all'esempio precedente sono davvero minime: in questo caso
infatti invece del text-indent si è specificato un padding sinistro così
da distanziare l'intero contenuto dei list-item e non solo la prima riga di testo.
Vediamo il CSS dell'esempio
per intero:

Fondamentali anche in questo caso il padding superiore pari alla metà dell'altezza
dell'icona (che in questo caso è di 12x12 pixel) e il background che si ripete a
metà del line-height (0.7em, ovvero la metà di 1.4em). Il padding sinistro di 14px
è stato combinato nello shorthand padding, il margine inferiore negativo,
atto a compensare il padding superiore necessario alla tecnica è a sua volta bilanciato
da un padding inferiore per ciascun list-item. Il nostro esempio è così ultimato:
rivediamolo.

Conclusioni

Termina qui l'articolo dedicato alle liste in cui abbiamo
visto come sia possibile attribuire icone come marcatori grafici. Gli esempi presentati
hanno un'ottima compatibilità: sono stati infatti testati con successo su
Internet Explorer dalla versione 5 alla 7 e le ultime versioni di Opera, Firefox e
Safari. Codice e immagini sono disponibili per il download.

In conclusione segnalo due ottime risorse per reperire le icone ovvero
Bullet madness
e Sweetie. Alla prossima.