L'elenco degli autori e della versione del documento viene formattato con la seguente marcatura:
Scegliamo di usare un elenco di definizione per stabilire una precisa relazione semantica tra le voci dell'elenco. Ciascuna voce viene infatti definita dalla voce che segue. A questo punto passiamo ad applicare gli stili.
Abbiamo assegnato un colore agli elementi strong
presenti all'interno degli elementi dt
e abbiamo
quindi diminuito la dimensione del font per l'elenco di definizione (righe 5-7).
Le righe che vanno dalla 7 alla 14 presentano alcune caratteristiche interessanti nella formattazione degli elenchi non ordinati.
Il primo blocco di dichiarazioni (righe
8-11) annulla il classico rientro a sinistra degli elenchi non ordinati, azzerando il margine ed il padding sinistro dell'elemento
ul
. Questa doppia dichiarazione si rende necessaria in quanto alcuni browser (come Internet Explorer e Opera) usano
il margine sinistro per creare il rientro, mentre altri (come Safari e Firefox) usano il padding sinistro.
L'ultimo blocco di dichiarazioni
(righe 11-14) elimina il marcatore dell'elenco non ordinato dichiarando ogni voce di elenco come un elemento di blocco.
Secondo le specifiche, infatti, un elemento può avere un marcatore solo se il valore della proprietà display
è impostato su list-item
. In questo modo evitiamo di dover ricorrere alla dichiarazione
list-style-type: none
che potrebbe confondere i lettori di schermo, come già segnalato da Michele Diodati nel
sesto capitolo della sua Accessibilità. Guida completa.
Purtroppo questa soluzione non funziona in Internet Explorer 7 ed inferiori. Per questo browser, infatti, una voce di elenco viene già considerata come un elemento di blocco, e quindi il marcatore non viene soppresso. Se vogliamo ottenere una compatibilità anche con questo browser dobbiamo ricorrere ad un semplice stratagemma.
Un marcatore di elenco di norma eredita dalla voce cui appartiene il colore del testo. Quindi dichiarare per una voce di elenco
un colore del testo uguale a quello di sfondo equivale di fatto a rendere invisibile il marcatore oltre al testo della voce. Poiché quello che vogliamo è rendere invisibile solo il marcatore, dobbiamo modificare la marcatura
aggiungendo un elemento all'interno delle voci di elenco che vada a racchiudere il testo. Nel nostro caso
aggiungiamo un elemento span
:
Gli stili da applicare sono i seguenti:
Il primo blocco di dichiarazioni (righe 1-3) annulla il marcatore di elenco impostando un colore del testo uguale
a quello di sfondo (qui ereditato dall'elemento body
), mentre il secondo (righe 4-6) rende di nuovo visibile
il testo all'interno dell'elemento span
. Possiamo apprezzare il lavoro svolto sinora in
questa immagine.
Figura 12: L'elenco degli autori e della versione del documento
[D]