Tab grafiche centrate

I menu sono senza dubbio uno degli argomenti più gettonati qui su HTML.it.
Dopo Menu con tab grafiche,
Menu a minitabs
e Tab con i CSS,
eccoci quindi ad un nuovo appuntamento in cui vedremo un menu a tab grafiche centrate.
Ecco una piccola anteprima dell'esempio e il suo screenshot:

Si tratta di un menu piuttosto semplice graficamente, ma denso concettualmente
dal punto di vista dell'implementazione. Vediamo anzitutto i vantaggi di una soluzione
simile:

• Le tab sono senza dubbio una delle metafore più comuni per ciò che riguarda
  i menu orizzontali dato il loro elevato impiego nelle tipologie di siti
  più disparate
• È un modo tutto sommato semplice per ottenere un menu centrato, a volte
  necessario per questioni di design
• La pagina/sezione corrente è facilmente individuabile, dato che il tab
  corrispondente è l'unico che viene presentato "aperto", ovvero senza bordo inferiore
• Il testo è ridimensionabile, e ciascuna delle tab è adattabile al suo contenuto.

D'altra parte, l'esempio che presenterò in questo articolo ha un piccolo difetto
che riguarda la compatibilità: non funziona su IE5.0. Questo browser è piuttosto
obsoleto, e conta una percentuale di utilizzo davvero minima (si stima tra l'1 e il 2%).
Per quanto ne so, è piuttosto difficile se non impossibile ottenere una versione delle
tab grafiche centrate che funzioni su IE5, dato che questo browser non ammette padding
su elementi inline.

Premesso ciò, siamo pronti a procedere a vedere l'implementazione dell'esempio.

Il markup e la grafica

Il markup dell'esempio è piuttosto semplice: si
tratta infatti di una lista non ordinata che contiene i link. In aggiunta, il list-item
che contiene la voce del menu attiva ha id="current". Ecco l'HTML:

Per quanto riguarda la grafica, sono due le immagini di sfondo usate per l'esempio,
una per il tab attivo e una per le altre voci del menu:

Sono entrambe grandi 180 per 50 pixel, così da avere una scalabilità sufficiente
sia in orizzontale (per adattare il testo al loro interno) che in verticale (per consentire
il ridimensionamento dei font). Ciascuna voce del menu è comunque adattabile,
e verranno usate solo le porzioni necessarie. Siamo ora pronti per procedere
con il CSS dell'esempio.

Il CSS dell'esempio

Per poter centrare con i CSS elementi affiancati la cui grandezza non
è nota a priori ma solo determinata dal loro contenuto, come nel caso delle voci del menu
dell'esempio, l'unico modo è dichiararli inline
e specificare l'allineamento del testo del suo contenitore attraverso text-align: center.
Questo è il punto di partenza, anche se l'esempio
(ecco il CSS ottimizzato per la lettura) si presenta
molto articolato... vediamo i passaggi essenziali del suo sviluppo. Si tratta infatti di:

1. centrare il testo con text-align:center la lista e definire un bordo inferiore di 1px
2. rimuove il bullet e specificare un line-height tale da non interferire con la resa del menu
   (ho determinato empiricamente che un valore di 1.3 è adeguato)
3. rendere inline i list-item
4. specificare un padding verticale (inferiore e superiore, di 7px nel caso dell'esempio) per lista, list-item e link
5. specificare un padding destro per i list-item e la porzione destra dell'immagine di sfondo
6. specificare un padding sinistro per i link e la porzione sinistra dell'immagine di sfondo
7. rimuovere la sottolineatura dei link e specificare il colore del testo in stato normale e in stato :hover
8. ridefinire l'immagine di sfondo per il list-item che contiene il link corrente
9. Assegnare un bordo bianco di un pixel sul tab attivo, così da coprire il bordo inferiore della lista
10. Sistemare infine la resa su Internet Explorer per quanto riguarda il padding verticale

La parte essenziale del CSS dell'esempio
è il punto 4, ovvero l'assegnazione del padding verticale sia
sulla lista, list-item e link. Il padding su elementi inline viene infatti reso all'esterno
della "zona di testo", perciò dovremo assegnarlo sia ai link (elementi naturalmente
inline) che ai list-item (resi inline così da poterli affiancare e centrare). Il padding
sulla lista, infine, è necessario per poter dar spazio al padding di link e list-item.

Per ciò che riguarda il padding orizzontale (punti 5 e 6 sopra) è da notare come venga assegnato su link
e list-item, così da poter sfruttare le due porzioni utili dell'immagine di sfondo.
La seguente immagine aiuterà forse nella comprensione dell'architettura dell'esempio.

In quanto a Internet Explorer (sulle versioni dalla 5.5 alla 7):
c'è da considerare infine che il padding verticale sia su list-item che sui link
ha un effetto disastroso sulla sistemazione degli sfondi.. presumo che sia perchè
questo browser non implementa in maniera totalmente corretta l'inline formatting model.
Qui la resa dell'esempio su IE7 senza i dovuti
aggiustamenti del caso:

Siamo quindi giunti al tuning del CSS
su Internet Explorer, in cui è necessario annullare il padding verticale
sui list-item o sui link. Ho scelto di annullarlo sui list-item, considerando anche
un altro difetto di resa: il fatto che il padding destro dovrà essere leggermente
minore (4 pixel invece di 7) per ottenere una spaziatura orizzontale bilanciata
tra il testo e i confini della tab. Ecco le ultime due regole:

La prima regola specifica il padding per IE5.5 e IE6, mentre la
seconda è vista solo da IE7. Da notare che, seppure le due regole contengano
lo stesso blocco dichiarativo, non è possibile accorparle in una regola sola
attraverso il selettore di gruppo perché altrimenti si perderebbe la compatibilità
con le versioni 5.5 e 6. Si sono dovuti usare quindi due hack distinti
ciascuno con la sua regola dedicata. Per approfondimenti sugli hack, rimando all'articolo
Hack per IE7:
basti sapere che con il loro uso è possibile creare regole
specifiche per determinati browser e totalmente ininfluenti per gli altri.

Il nostro esempio è così ultimato: in questo caso
ho preferito focalizzare l'attenzione sulla sua progettazione anzichè sull'implementazione
del suo CSS, evidenziandone i concetti alla base.

Usare il commento condizionale

Nel primo esempio per risolvere problemi di
compatibilità su IE5.x, IE6 e IE7 si sono usati gli hack: un'alternativa per ottenere
un foglio di stile che ne è libero è invece l'uso del
commento condizionale.
Ecco quindi il secondo esempio in cui
la regola specifica per IE sul padding dei li è inserita
all'interno del commento condizionale, e il codice relativo:

Ovviamente in casi reali sarebbe preferibile portare la regola dentro un CSS esterno,
insieme ad altre regole specifiche per IE qualora ce ne fosse bisogno. Stesso discorso
per il CSS principale dell'esempio, che ho lasciato
incorporato nella pagina per comodità di consultazione del lettore.

Conclusioni

Abbiamo visto una possibile implementazione di un menu a tab centrato, in cui per garantire
la compatibilità con IE abbiamo dovuto creare regole specifiche. Da notare come
sia possibile, solo intervenendo sull'allineamento del testo della lista che contiene
il menu, trasformare il menu centrato
in un menu allineato a sinistra o
a destra.

Gli esempi sono stati testati con successo sulle versioni di IE dalla 5.5 alla 7,
oltre che su Opera 9, Firefox 2 e Safari 2. Codice e immagini sono disponibili
per il download. Alla prossima.