Un giro, anche rapido, sui principali siti o weblog dedicati al web design,
vi farà capire come uno degli argomenti caldi degli ultimi mesi sia stato
quello delle liste. Questo fondamentale elemento di (X)HTML sta vivendo una
sorta di riscoperta. Se prima lo si limitava al classico uso per elenchi puntati
o numerati all'interno del corpo della pagina, ora, grazie ai CSS, se ne valuta,
giustamente, il valore strutturale e semantico anche per altri ambiti come i
menu di navigazione. Su questi argomenti torneremo presto con una serie di articoli.
In questo ci limiteremo all'esposizione di due semplici metodi per utilizzare
immagini al posto dei tradizionali marcatori.
Le liste in HTML
L'implementazione delle liste in (X)HTML è piuttosto limitata relativamente
agli aspetti grafici e di presentazione. D'altro canto (e non ci stancheremo
mai di ripeterlo) (X)HTML non è nato per definire lo stile, ma solo la
struttura di un documento.
Tre sono i tipi di liste contemplati nella specifica:
- Liste ordinate: <ol>
- Liste non ordinate: <ul>
- Liste di definizione: <dl>
Gli elementi <ol>, <ul>
e <dl> impostano semplicemente
l'apertura della lista. Le singole voci (item) sono definite con l'elemento
<li> per i primi due tipi, <dt>
e <dd> per le liste di definizione.
Su quali aspetti possiamo intervenire per personalizzare l'aspetto delle nostre
liste facendo leva solo sul (X)HTML? Essenzialmente solo sull'aspetto del marcatore
di lista. Ciò è possibile grazie all'attributo type, che può
essere applicato sia alla lista sia ai singoli item. Per le liste non ordinate,
quelle su cui lavoreremo per il resto dell'articolo, type può assumere
tre diversi valori:
- circle
- square
- disc
Le liste con i CSS
Con i fogli di stile, fortunatamente, le possibilità di modificare l'aspetto
delle liste sono infinite. Qui ci soffermeremo su un singolo aspetto: l'uso di immagini come marcatori
di lista. Ne valuteremo le modalità e i problemi di implementazione.
In questa pagina abbiamo riunito
tutti gli esempi su cui lavoreremo e il codice relativo.
La proprietà che ci interessa per ottenere l'effetto desiderato è
list-style-image. Cito dalla guida
ai CSS: "Definisce l'URL di un'immagine da usare come marcatore di un list-item".
Può essere definita a livello di lista o di item.
In alternativa, possiamo adottare la shorthand property list-style,
con la quale è possibile impostare in un colpo solo tutti gli aspetti
che ci interessano: il tipo di marcatore, la presnza di un'immagine, la posizione
del marcatore stesso. E' questa la sintassi che abbiamo usato negli esempi.
Nel primo trovate una lista semplice con marcatore quadrato:
ul#semplice {
font-size: 12px;
list-style: square;
line-height: 1.5;
}
Diciamolo. Per progetti grafici elaborati e da curare nei dettagli, non è
il massimo. Molto meglio un marcatore fatto bene e in sintonia con grafica e
layout. Per il secondo degli esempi abbiamo 'rubato' un'immaginetta dal redivivo
A List Apart, dove di marcatori siffatti si fa uso abbondante:
ul#bullet1 {
font-size: 12px;
line-height: 1.5;
list-style: square url(listmark.gif);
}
Prima osservazione. La scelta dell'immagine deve essere valutata con attenzione.
Le dimensioni dovrebbero adattarsi il più possibile a quelle del font.
Già con una molto piccola come quella che abbiamo usato, emerge il principale
problema di questa tecnica: l'allineamento con il testo del list-item. E' pressocché
impercettibile, ma se osservate bene la pagina degli esempi con Explorer e Mozilla/Firebird
noterete la differenza. Il testo nel browser di Microsft non appare perfettamente
centrato verticalmente, molto meglio sugli altri.
La situazione peggiora se usiamo immagini di dimensioni maggiori (20px), come
nell'esempio successivo:
ul#bullet2 {
font-size: 12px;
line-height: 1.5;
list-style: url(motori_20.gif);
}
Chiariamolo subito. Un sistema per ottenere una centratura verticale perfetta
su tutti i browser non esiste. L'argomento è stato spesso proposto su
diverse mailing list e una soluzione accettabile non è ancora stata trovata.
Conclusione: la tecnica va bene con immagini piccole e/o adattate alle dimensioni
del font.
Una tecnica alternativa
L'effetto visivo del marcatore di lista con immagine può essere ottenuto
con un altro sistema, sicuramente più flessibile, anche se forse meno
corretto semanticamente. Si tratta di usare l'immagine come sfondo del list-item
e non come marcatore. Ecco il codice:
ul#bullet3 {
font-size: 12px;
line-height: 1.5;
}
ul#bullet3 li {
list-style-type: none;
padding: 0 0 5px 25px;
background: url(motori_20.gif) no-repeat 0px 0px;
}
Come si vede, le regole principali vanno applicate in questo caso al list-item.
Analizziamole.
Per prima cosa impostiamo la proprietà list-style-type
sul valore none. E' necessario per eliminare il marcatore di default. Passiamo
quindi a definire il padding. Attenzione ai quattro valori. I primi due (0 0)
sono per il lato superiore e quello destro. Il terzo per il lato inferiore.
Il quarto è quello più importante. Deve essere impostato tenendo
conto delle dimensioni dell'immagine. Nell'esempio ne abbiamo una di 20px, per
cui 25px è un valore ottimale. Se volessimo uno spazio maggiore, basterebbe
un valore superiore. Con un valore inferiore a 20px, invece, il testo si sovrapporrebbe
all'immagine.
Con l'ultima regola definiamo l'immagine di sfondo e la sua posizione. I due
valori in pixel che chiudono la regola servono a settare la posizione dell'immagine,
rispettivamente, relativamente al lato sinistro e a quello superiore. Se non
siamo soddisfatti dell'allineamento del testo basterà modificare di volta
in volta questi valori fino a raggiungere l'effetto desiderato.
Questa tecnica presenta un solo problema. Se l'utente disabilita il caricamento
delle immagini non vedrà nessun marcatore. Nessuna difficoltà,
invece, su browser senza supporto dei CSS: le immagini vengono sostituite dal
classico pallino nero.
Lo stesso effetto appena visto può essere applicato ad altri elementi.
Vi proponiamo, per concludere, un esempio con un titolo:
h2#titolo {
font-size: 20px;
padding: 0 0 5px 25px;
background: url(grafica_20.gif) no-repeat 0px 2px;
}
