Le liste di definizione sono un elemento decisamente poco usato nelle pagine web, sebbene siano molto flessibili ed espressive. In questo articolo, dopo una piccola introduzione su quando il loro uso sia adeguato, vedremo come si prestino adessere peronalizzate con i fogli di stile.
Quando usare le liste di definizione
Le liste di definizione hanno lo scopo di elencare descrittivamente una serie di elementi. In generale sono costituite da termini e descrizioni. Il loro uso più naturale è quindi una sorta di mini-dizionario.
Ma non solo... potremo descrivere attraverso le liste di definizione dialoghi, elenchi di eventi, autori e commenti, gallerie di immagini con didascalie, menu di navigazione divisi per sezioni, funzioni o proprietà -per esempio Javascript o CSS- e il loro uso, elenchi di prodotti con prezzo e descrizione.
In generale, quindi, le liste di definizione sono indicate per elencare relazioni. Diamo uno sguardo alla loro marcatura:
<dl>
<dt>Gatto</dt>
<dd>Mammifero domestico.</dd>
<dt>Cane</dt>
<dd>Mammifero domestico.</dd>
<dt>Elefante</dt>
<dd>Mammifero terrestre molto grande</dd>
</dl>
Le liste di definizione dl contengono termini dt ciascuno seguito da nessuna, una o più descrizioni dd. Una piccola nota: seppure i termini di definizione dt siano simil-block level, non possono contenere elementi block level, quali header, paragrafi o div. Potremo quindi inserire al loro interno elementi inline: link, immagini ed altri quali strong, em e span.
Per quanto riguarda le descrizioni, queste invece potranno contenere elementi di ogni sorta, sia inline che block-level. Infine c'è da tener presente che le dl possono avere come figli diretti solo elementi dt e dd.
Come si presentano senza CSS
Prima di personalizzare un elemento tramite i CSS, bisognerebbe sempre conoscerne la sua natura e la sua resa sul browser senza fogli di stile. Ecco il nostro primo esempio, senza CSS.
Le liste dl sono elementi simil-block level, e si estendono in orizzontale per tutta la larghezza possibile. Presentano dei margini verticali di default (come i paragrafi e i titoli per intenderci).
Le descrizioni dd hanno un margin-left non nullo per dare una separazione visuale. Una simile presentazione è tipica in tutti i browser, e viene servita di default in assenza di CSS.
Ma ora mettiamoci all'opera: vedremo in questa serie come ciò che si presenta semplice, quasi scarno in assenza di CSS, si presti benissimo alla personalizzazione.
Esempio 1: CSS minimo ma efficace
Arriviamo al primo esempio, una lista di definizione nella sua più classica accezione, ovvero termini e descrizioni. Il CSS è davvero semplice e minimale, rispetto alla versione senza stile si presenta decisamente meglio. Vediamolo:
dl{width:200px}
dt{font-weight: bold;color: #36C;border-bottom: 3px solid #CF9}
dd{margin: 0.2em 0 1em;color: #444;line-height: 1.3em}
Alla lista di definizione è attribuita una larghezza di 200 pixel. I termini di definizione dt vengono resi in blu e grassetto, con un bordo inferiore verde chiaro spesso 3 pixel.
Alle descrizioni dd viene assegnato un margine superiore molto piccolo di 0.2em, un margine inferiore di 1em per separarle verticamente dai termini successivi, e si azzerano i margini orizzontali con la sola dichiarazione:
margin:0.2em 0 1em
Infine, il loro testo viene reso grigio scuro, e l'altezza di linea è stata leggermente aumentata.
Esempio 2: una lista di definizione con bordi
Il secondo esempio è una lista di definizione con bordi, usata per descrivere proprietà CSS. Anche in questo caso l'implementazione è molto semplice.
Alla dl viene assegnata una larghezza, un colore di sfondo, i bordi orizzontali e quello inferiore. Ai dt viene assegnato un bordo superiore, così da chiudere tutti i bordi.
Ai dt vengono tolti i margini, e infine del padding è aggiunto sia su termini e descrizioni così da garantire spaziature omogenee. Ecco il CSS per intero:
dl{width:450px;background: #E1EAFE;
border:solid #CCC;border-width:0 1px 1px}
dt{font-weight:bold;border-top:1px solid #CCC;
padding: 10px 10px 0}
dd{margin:0;padding: 0 10px 10px}
Terzo esempio: con righe alterne
Il terzo esempio, rispetto al secondo, per ottenere l'effetto a righe alterne ha due piccole aggiunte: una nell' HTML e l'altra nel CSS. Ecco la sua struttura HTML:
<dl>
<dt class="odd">Termine 1</dt>
<dd class="odd">Descrizione 1</dd>
<dt>Termine 2</dt>
<dd>Descrizione 2</dd>
<dt class="odd">Termine 3</dt>
<dd class="odd">Descrizione 3</dd>
</dl>
In sostanza, ogni ad coppia dispari dt-dd viene assegnata la classe "odd". Ecco l'unica regola CSS aggiuntiva rispetto all' esempio precedente:
*.odd{background: #F6F6F6}
Si conclude qui la prima parte dell'articolo sulle liste di definizione, in cui dopo una piccola introduzione sul loro uso e la presentazione di base abbiamo visto dei semplici esempi pratici. Nella seconda parte tratteremo l'uso del background.
Nella prima parte, dopo una piccola introduzione, abbiamo visto alcuni esempi molto semplici di uso dei CSS per questi elementi. In questa seconda parte ci spingeremo un po' oltre, usando le immagini di sfondo. C'è una cosa da evidenziare prima di iniziare.
Come vedremo nei molti casi reali di possibile uso delle liste di definizione come strumento di marcatura, queste si presentano molto flessibili e adatte in molte situazioni. Hanno però un piccolo svantaggio: dato che i termini dt possono contenere solo elementi inline, non potremo inserire al loro interno titoli quali h2 o h3, h4.
Anche se con i CSS potremo personalizzare peso e grandezza dei termini di definizione, si presuppone che i termini di definizione non abbiano lo stesso impatto semantico dei titoli per i motori di ricerca. Per sezioni importanti del vostro sito, quindi, il mio consiglio è di valutare bene se usare coppie titoli-paragrafi, oppure coppie titoli-liste non ordinate, eventualmente incorporate in div se queste hanno lo stesso senso logico delle liste di definizione.
L'argomento della serie sono i CSS, ma ho pensato di offrire una buona varietà di casi reali per i contenuti degli esempi. A voi valutare se sia meglio usare liste di definizione oppure div, titoli con paragrafi o liste ul per le vostre pagine. Ora, iniziamo.
Liste di definizione per i commenti
Nel quarto esempio ho usato una lista di definizione per marcare una serie di commenti: un simile markup potrebbe essere usato per esempio per commenti ad articoli e blog. I dt vengono usati per definire l'autore, mentre le dd per il commento relativo. Da notare che, come potrete vedere dl codice HTML, all'interno dei dd vengono usati dei paragrafi. Vediamo il CSS. Per prima cosa viena attribuita una larghezza alla lista di definizione:
dl{width:400px}
I termini vengono resi in grassetto, viene attribuita un'altezza e un'altezza di linea, il colore del testo e del padding sul lato sinistro così da lasciare spazio per l'immagine:
dt{font-weight: bold;height: 20px;
line-height: 20px;padding-left: 15px;color: #F60;
background: url(omino.png) no-repeat center left}
Ora le descrizioni: viene rimosso il margine destro di default, e aggiunto un margine inferiore; vengono aggiunti dei bordi e un immagine di sfondo con un leggero gradiente radiale. Infine ai paragrafi al loro interno vengono tolti i margini, aggiunto del padding e aumentata l'altezza di linea:
dd{margin:0 0 15px;border:1px solid #BBB;
background: #CCD8E6 url(grad.jpg) no-repeat top left}
dd p{margin: 0;padding: 5px;line-height: 1.3em}
Liste di definizioni per menu a sezioni
Se osservate il quinto esempio potrete pensare che si siano usati titoli e liste non ordinate, oppure liste non ordinate annidate. Al contrario, ho usato le liste di definizione: le dd per le sezioni, e i dt per le singole voci di menu.
Come ho accennato nella prima parte le liste di definizione sono indicate per elencare relazioni, e in questo caso si definisce una relazione tra una sezione del sito e i link che la compongono. Vediamo una parte dell'HTML:
<dl>
<dt>Servizi</dt>
<dd><a href="#">Web design</a></dd>
<dd><a href="#">Immagine coordinata</a></dd>
<dd><a href="#">Grafica tradizionale</a></dd>
<dd><a href="#">Pubblicità</a></dd>
<dt>L'azienda</dt>
<dd><a href="#">La storia</a></dd>
<dd><a href="#">Dove siamo</a></dd>
eccetera...
Ora il CSS, che vediamo per intero:
dl{width:160px}
dt{font-size: 120%;margin: 10px 0 0;color: #666}
dd{margin: 0;padding-left:14px;line-height: 1.4;
background:url(bullet.gif) no-repeat center left}
dd a{text-decoration: none;color: #69F}
dd a:hover{color: #F60}
I termini vengono resi un po' più grandi, e viene lasciato un margine superiore. Alle definizioni si tolgono i margini, viene aggiunto del padding sinistro e regolata l'altezza di linea per ospitare il marcatore. Infine, ai link viene tolta la sottolineatura e attributo un colore per lo stato normale e quello :hover. Rivediamo l'esempio.
Liste di definizione per un elenco di news
Arriviamo all'ultimo esempio di questa seconda parte: si tratta di una lista di definizione usata per un elenco di news con angoli arrotondati, che andrebbe bene per essere usata in una colonna del sito oppure come sezione float in evidenza. Vediamo la struttura dell'HTML:
<dl>
<dt><a href="#">News 1</a></dt>
<dd><p>Breve estratto della notizia</p></dd>
<dt><a href="#">News 2</a></dt>
<dd><p>Breve estratto della notizia</p></dd>
<dt><a href="#">News 3</a></dt>
<dd><p>Breve estratto della notizia</p></dd>
</dl>
Prima di procedere con il CSS, c'è da notare una cosa. Abbiamo già usato una tecnica per ottenere gli angoli arrotondati con gli sfondi nell'articolo sul background. In questo caso c'è però una novità: l'immagine utilizzata è una sola, larga duecento e alta quattrocento pixel, consentendoci comunque di avere box fluidi in altezza. Ecco l'unica immagine utilizzata.
L'implementazione CSS è piuttosto semplice: in effetti l'aspetto esenziale per comprenderla sta nell'uso del padding combinato con il background:
dl{width: 200px;line-height: 1.3;color: #555}
dt{padding: 15px 15px 0;font-weight:bold;
background:url(rounded.jpg) no-repeat top}
dt a{color: #69C}
dt a:hover{color: #369}
dd{margin: 0;padding: 5px 15px 15px;
background:url(rounded.jpg) no-repeat bottom}
dd p{margin:0;padding: 0 0 5px}
In sostanza alla lista di definizione viene attribuita una larghezza pari a quella dell'immagine di sfondo. Ai termini viene assegnato un padding superiore e orizzontale di 15 pixels, per evitare che il testo si disponga sopra i bordi dell'immagine: di questa, viene usata la parte superiore.
Il padding viene usato anche per le descrizioni: 5 pixels superiori per staccare un po i titoli, 15 orizzontali e 15 inferiori. Dell'immagine in questo caso viene usata la parte inferiore.
Conclusioni
Si conclude qui la seconda parte sulle liste di definizione, in cui abbiamo visto diversi usi e come poter abbellirle attraverso gli sfondi e i CSS. Nel prossimo appuntamento vedremo altri usi delle liste di definizione, questa volta incentrati sulla proprietà float. Alla prossima.
