Indentazione corretta delle liste

Summary: Trying to change the indentation of lists with CSS is trickier than it looks, but only because CSS-conformant browsers took different paths to default indentation. Find out how to get them all in line.

Una delle più frequenti modifiche allo stile delle liste, è la distanza di indentazione, cioè la distanza alla quale i vari punti sono spostati rispetto al bordo. Questa modifica è spesso causa di frustrazione, perchè ciò che funziona in un browser spesso non ha lo stesso effetto in un altro. Per esempio se si dichiarano liste senza margine sinistro, in Explorer si osserva uno spostamento, mentre nei browser basati su Gecko nessuno.

Per compredere questo fenomeno, e sorpattutto come evitare il problema, è necessario esaminare in dettaglio come sono costruite le liste.

Costruire una lista

Prima di tutto, si consideri un singolo elemento di una lista, senza marcatore (tipicamente il "puntino" che lo precede), che non è ancora parte della lista stessa. Fluttua da solo nel vuoto, senza nessun attributo, come mostrato in Figura 1.

Il bordo punteggiato rosso rappresenta i limiti esterni dell'area dei contenuti dell'elemento della lista. Si ricordi che, in questo momento, l'elemento della lista non ha ne' bordi ne' rientri (padding). Se si aggiungono due altri elementi alla lista, si ottiene il risultato di Figura 2. add two more list items, we get a result like that shown in Figure 2.

Adesso inseriamo questi elementi nell'elemento padre; per questo esempiop useremo una lista non ordinata (cioè <ul>). Secondo il modello a scatole dei CSS (CSS box model), l'area occupata da ciascun elemento della lista, deve essere visualizzata all'interno dell'area dei contenuti dell'elemento padre. E poichè l'elemento padre non ha ancora ne' bordi ne' rientri, si ottiene il risultato di Figura 3.

Il bordo punteggiato blu mostra i bordi dell'area dei contenuti dell'elemento <ul>, che non avendo rientri finisce per avvolgere i tre elementi della lista senza lasciare spazi.

Adesso aggiungiamo i marcatori degli elementi, che nel caso di una lista non ordinata sono tipicamente dei "puntini" circolari, come mostrato in Figura 4.

Visivamente i marcatori sono all'esterno dell'area dei contenuti di <ul>, ma questo non è molto importante. Il punto chiave è che i marcatori sono all'esterno del riquadro principale degli elementi <li>, non di <ul>. Sono da considerare una sorta di appendici agli elementi della lista, appese all'esterno dell'area degli elementi <li>, ma ad essi collegate.

Questa è la ragione per cui, in ogni browser eccetto Internet Explorer, i marcatori sono posizionati all'esterno del bordo eventualmente impostato per gli elementi <li>. Si assume che il valore di list-style-position sia outside, perchè se viene cambiato in inside, i marcatori sono spostati all'interno dei riquadri degli elementi <li>, proprio come se fossero la primissima parte del loro contenuto.

Indentare due volte

Quindi come appare tutto ciò in un documento? Al momento, si ha una situazione analoga a questi stili:

ul, li {margin-left: 0; padding-left: 0;}

Se avessimo messo questa lista così come è, in un documento, non ci sarebbe stato nessuna apparente indentazione ed i marcatori sarebbero probabilmente finiti all'esterno del bordo sinistro del browser. Per evitare tutto ciò ed avere l'indentazione, ci sono solamente tre opzioni disponibili per gli sviluppatori.

1. Dare a ciascun elemento <li> un margine sinistro.
2. Dare all'elemento <ul> un margine sinistro.
3. Dare all'elemento <ul> un rientro (padding) sinistro.

Di fatto nessuno sembra aver usato la prima opzione. La seconda opzione è stata utilizzata da Internet Explorer e da Opera. La terza è stata adottata da Gecko e da tutti i browser basati su tale motore.

Concentriamoci sulle due opzioni usate. In Internet Explorer e Opera, le liste sono indentate imponendo un margine sinistro di 40 pixel sull'elemento <ul>. Se si applica un colore di sfondo a <ul> lasciando inalterati i bordi, si ottiene il risultato di Figura 5.

Gecko da parte sua impone un rientro (padding) di 40 pixel per l'elemento <ul>, per cui visualizzando la lista con lo stesso identico stile usato per la precedente figura, si ottiene il risultato di Figura 6.

Come è possibile notare, i marcatori rimangono attaccati agli elementi <li>, ovunque essi siano. La differenza è interamente nello stile di <ul>, per cui è possibile notare le differenze solo con un colore di sfondo per <ul>.

Trovare la consistenza

Tirando le fila di quanto detto: se si desidera una visualizzazione omogenea e consistente delle liste su Gecko, Internet Explore e Opera, occorre impostare a entrambi i margini ed i rientri sinistri degli elementi <ul>. Possiamo invece ignorare gli elementi <li>. Se si desidera riprodurre la visualizzazione di default in Netscape 6.x, occorre scrivere:

ul {margin-left: 0; padding-left: 40px;}

Se invece siamo interessati a seguire ilmodello di Explorer/Opera:

ul {margin-left: 40px; padding-left: 0;}

Ovviamente, è possibile modifcare i valori utilizzati secondo le proprie necessità, anche in unità di misura diverse dal pixel, come 1.25em. Se invece si desidera non avere nessuna indentazione, occorre impostare a zero margine e rientro:

ul {margin-left: 0; padding-left: 0;}

Si ricordi comunque, che facendo così si hanno i "puntini" appesi all'esterno della lista e del relativo elemento padre, per cui se l'elemento padre è il body, è molto probabile che i "puntini" finiscano all'esterno della finestra del browser, quindi non visibili.

Conclusione

In conclusione, nessuno dei browser mezionati in questo articolo fa la cosa giusta o quella sbagliata su come disegnano le liste. Utilizzano stili differenti, ed è questo che crea problemi. Tuttavia assicurandosi di impostare sia margine che rientro sinistro delle liste, si ottiene un risultato di indentazione delle liste quanto più possibile omogeneo tra i vari browser.

Raccomandazioni

• Quando si altera l'indentazione delle liste, assicurarsi di impostare sia margine che rientro (padding)