Uno dei problemi maggiori nella costruzione dei menu orizzontali
è la scelta dei separatori da utilizzare.
Nel corso del tempo si sono scatenate autentiche
dispute dottrinali tra gli esperti di usabilità a proposito
del tipo di separatore da utilizzare. C'è chi opta
per il classico segno di maggiore (>), chi per i due punti (:
,
e chi ancora per un trattino verticale (|).
In genere tuttavia la soluzione più usata dai designer è quella
dei bordi applicati tramite CSS agli elementi li o a.
Ovviamente a questo punto sorge il problema della prima
e dell'ultima voce del menu, le quali di solito non devono avere,
rispettivamente, il bordo sinistro e destro impostato.
Sfruttando al massimo il potenziale dei CSS si potrebbe scrivere:
codice:
#menu>li:first-child {border-left: none;}
#menu>li:last-child {border-right: none;}
Purtroppo l'ultima release di Internet Explorer (la 7)
supporta solo la prima dichiarazione e non la seconda.
Di conseguenza spesso si fa ricorso ai selettori di ID e di classe,
anche per una questione di retrocompatibilità
con le precedenti versioni di Explorer. Ai designer si presenta
poi un altro problema:
il bordo impostato è sempre più alto dei caratteri
delle voci del menu. Questo avviene perché il bordo delimita
il box della voce di elenco, la cui altezza è determinata
anche dall'eventuale padding impostato.
Anche eliminando il padding, il problema permane.
Così una soluzione che spesso viene usata
è quella di inserire degli elementi span con all'interno
un trattino verticale (|). In questo modo, usando un carattere,
l'altezza del separatore sarà uguale ai caratteri usati nelle voci del menu.
Così facendo, tuttavia, la marcatura si appesantisce di elementi superflui,
cosa che certamente non agevola il compito dei lettori di schermo.
In questo caso il contenuto generato può rivelarsi particolarmente utile.
Si ipotizzi di avere la seguente marcatura:
Seguendo il filo del nostro discorso,
a questo punto dovremmo inserire degli
elementi extra all'interno di ciascuna voce di lista
per poter visualizzare il separatore "|".
Fortunatamente il contenuto generato ci evita un'inutile fatica.
Infatti possiamo scrivere:
codice:
ul>li:after {
content: '\7C';
margin-left: 0.3em;
}
ul>li:last-child:after {
content: normal;
}
Il risultato:
Primo link | Secondo link | Terzo link | Quarto link | Quinto link
Lo pseudo-elemento :after inserisce il contenuto
(in questo caso il trattino verticale, qui scritto nel canonico formato
Unicode)
esattamente dopo il contenuto principale della voce del menu.
Il contenuto generato eredita tutte le proprietà
ereditabili dal suo genitore. Questo significa che se il
contenuto generato fosse stato inserito nei link del menu,
esso avrebbe ereditato anche l'eventuale sottolineatura.
La seconda dichiarazione elimina il trattino verticale
dall'ultima voce del menu. Il valore CSS 2.1 normal serve a
sopprimere il contenuto generato per l'elemento specificato.
Nei CSS 2 tale valore non era presente, e quindi si sarebbe dovuto scrivere:
codice:
ul>li:after {content: " ";}
ossia inserire una stringa vuota. Internet Explorer
semplicemente mostrerà il menu senza separatori.
Se questo a livello di design è intollerabile, si può sempre optare
per l'uso dei bordi (si veda sopra).
Restando nell'ambito dei menu orizzontali, il contenuto generato
offre interessanti applicazioni
anche nella creazione dei cosiddetti "breadcrumbs" (briciole di pane),
ossia dei classici menu
"Voi siete qui" che indicano al posizione attuale all'interno del sito.
Il più amato dei separatori
è senza dubbio il segno di maggiore (>), anche se questo ha
a volte suscitato delle dispute tra gli esperti di accessibilità.
Lungi dal voler entrare in tali dispute,
è sufficiente ricordare in questa sede che tale separatore
ha una valenza puramente grafica.
Se i lettori di schermo supportassero il contenuto generato,
si potrebbe far ricorso ad una proprietà
dei fogli di stili acustici, cue-after, che opera in modo
analogo al contenuto generato. Esempio:
codice:
#menu>li {cue-after: url("ding.wav");}
In questo modo dopo il contenuto di ogni voce del menu avremo
un separatore acustico
che segnala all'utente la fine della voce. Tornando al nostro discorso,
vediamo come in questo caso il contenuto generato può tornare utile.
Data quindi la seguente marcatura:
Il codice CSS sarà:
codice:
ul>li:after {
content: '\3E';
margin-left: 0.3em;
}
ul>li:last-child:after, ul>li:first-child:after {
content: normal;
}
Il risultato:
http://www.css-zibaldone.com/test/cs...e/breadcrumbs/
Ancora una volta inseriamo una stringa testuale nella codifica Unicode.
Trattandosi di un carattere comune, si sarebbe anche potuto
inserire in modo letterale,
ma l'uso di Unicode è sempre una pratica da preferire,
specie se dovessimo trovarci a gestire caratteri non comuni.
L'ultima dichiarazione fa in modo che la prima
e l'ultima voce del menu non abbiano il separatore dopo il loro contenuto.
Anche qui Internet Explorer mostrerà il menu senza separatori.
In questo caso possiamo inserire i separatori tramite l'entità >,
rinunciando però all'uso del contenuto generato.
Rispondi quotando
