Gdesign.it :: Come progettare siti web accessibili ed efficaci ::


Home » How To » Sliding Doors of CSS, Parte II

Sliding Doors of CSS, Parte II

di Douglas Bowman, traduzione di Gdesign, 19 Maggio 2004

Versione Stampabile

L'articolo (in lingua inglese) proviene da A List Apart ed è stato tradotto e riprodotto per gentile concessione dell'autore.
Dato che "Sliding Doors" è il nome scelto dall'autore per definire la tecnica illustrata nell'articolo abbiamo preferito lasciare il titolo in lingua originale.


Sliding Doors of CSS (Parte I) ha introdotto una nuova tecnica per creare elementi di interfaccia dall'aspetto stupendo, basati su testo e caratterizzati da semplice markup semantico. Nella Parte II, approfondiremo la tecnica andando oltre. Quindi se non avete ancora letto la Parte I, dovreste farlo adesso.

Qui, tratteremo un nuovo scenario dove nessun tab è evidenziato, uniremo le Sliding Doors in una singola immagine rollover, forniremo un rimedio per la zona cliccabile in IE per Windows e suggeriremo un metodo alternativo per puntare ai tab. Non faremo un ripasso di base delle tecnica (vedete la Parte I per questo) ma torneremo indietro durante la spiegazione quando sarà necessario. (Nota traduzione: per tab menu si intende un menu costituito da "linguette"; quando parliamo di tab menu ci riferiamo a tutto il menu, mentre dicendo tab ci riferiamo alle singole "linguette" che costituiscono il menu.)

Nessun tab attivo (corrente)

Nella Parte I, non abbiamo tenuto conto di quei casi in cui non c'è un tab corrente, ovvero un tab attivo. Per esempio, un processo di registrazione, o delle pagine che contengono aspetti legali, non potrebbero essere compresi sotto nessuna delle sezioni rappresentata dai tab. Se nessuno dei tab può essere definito come "corrente", la regola che aggiunge 1 pixel al padding inferiore non viene usata e questo crea dei problemi agli angoli inferiori dei tab.

Per risolvere il problema, aggiungiamo un bordo inferiore di 1px a tutti tab "non-correnti" e rimuoviamo il bordo inferiore dal tab "corrente":

#header li {
  float:left;
  background:url("left.gif")
    no-repeat left top;
  margin:0;
  padding:0 0 0 9px;
  border-bottom:1px solid #765;
  }
#header #current {
  background-image:url("left_on.gif");
  border-width:0;
  }

Nell'Esempio 7 (in cui non ci sono tab correnti) possiamo vedere il risultato delle modifiche apportate al foglio di stile.

Rollover a singola immagine

Per non complicare le cose, nella Parte I non abbiamo intenzionalmente parlato di rollover. Adesso che abbiamo la tecnica di base sotto controllo, possiamo cominciare a combinarla con dell'altro per migliorarne l'utililità ed il funzionamento.

Fino a poco tempo fa, realizzare un qualsiasi tipo di effetto rollover sia con JavaScript che con CSS significava creare due set di immagini: una per lo stato "normale" e l'altra per lo stato "hover". Per evitare il ritardo causato dal download separato delle immagini dello stato "hover", esistono numerosi modi per fare il "preload" delle immagini richieste nella cache del browser. Petr Stanicek (aka "Pixy") ci mostra in "Fast Rollovers, No Preload Needed" come mettere insieme entrambi gli stati (normale e hover) in una singola immagine eliminando così la necessita di fare il preload delle immagini.

Nel nostro esempio, mettiamo le due immagini di sinistra una sopra l'altra per unire lo stato normale e quello hover in una nuova immagine. Facciamo lo stessa cosa per le immagini di destra. Quindi se prima le immagini erano alte 150 pixel adesso sono alte 300 pixel. Alla fine abbiamo left_both.gif e right_both.gif. Con queste due nuove immagini, possiamo sfruttare la proprietà CSS background-position per mettere in vista l'appropriata porzione dell'immagine di sfondo (con i due stati insieme) quando l'utente passa con il mouse sui tab:

Quando l'immagine di sfondo con i due stati uniti è posizionata in cima alla doorway, lo stato normale è visibile. Quando spostiamo l'immagine di sfondo di un certo valore, lo stato hover è visibile.

Cambiamo queste nuove immagini nelle voci dell'elenco e nell'ancora, mantenendo lo stesso posizionamento:

#header li {
  float:left;
  background:url("left_both.gif")
    no-repeat left top;
  margin:0;
  padding:0 0 0 9px;
  border-bottom:1px solid #765;
  }
#header a {
  float:left;
  display:block;
  background:url("right_both.gif")
    no-repeat right top;
  padding:5px 15px 4px 6px;
  text-decoration:none;
  font-weight:bold;
  color:#765;
  }

Quando utilizziamo la propietà background-position, dobbiamo specificare due valori, orizzontale e verticale, e i due valori devono essere specificati in quell'ordine. Non possiamo mettere insieme parole chiave (left, right, top, etc) come facciamo con la lunghezza o con valori in percentuale. Allora quando specifichiamo le posizioni per lo stato hover, evitiamo completamente di utilizzare parole chiave. Utilizziamo 0% per l'immagine sinistra che in questo modo posiziona il suo angolo sinistro contro il lato sinistro della doorway e 100% per l'immagine destra per fare la cosa opposta.

Sapendo esattamente nella nuova immagine dove inizia lo stato differente (normale e hover), possiamo posizionare verticalmente le immagini di sfondo con un preciso valore in pixel. I 150 pixel superiori di queste immagini contengono la stato normale, i 150 pixel inferiori contengono lo stato hover. Così per entrambe le immagini di destra e sinistra, spingiamo semplicemente verso l'alto le immagini di sfondo utilizzando un valore negativo di 150 pixel. Inoltre raddoppiamo i selettori per la prima regola (#header li:hover, #header li:hover a), cosi possiamo specificare il colore del testo una sola volta:

#header li:hover, #header li:hover a {
  background-position:0% -150px;
  color:#333;
  }
#header li:hover a {
  background-position:100% -150px;
  }

Possiamo utilizzare le stesse immagini (con i due stati insieme) per il tab corrente. Al posto di specificare una nuova immagine come facevamo prima, usiamo le stesse posizioni di sfondo cambiate dello stato hover:

#header #current {
  background-position:0% -150px;
  border-width:0;
  }
#header #current a {
  background-position:100% -150px;
  padding-bottom:5px;
  color:#333;
  }

Realizzare i rollover è davvero così semplice come sembra. Vediamoli in funzione nell'Esempio 8. Abbiamo diminuito il numero delle immagini che utilizzavamo da cinque (2 lato sinistro, 2 lato destro, e 1 di sfondo dietro i tab) a tre (1 lato sinistro, 1 lato destro, 1 di sfondo), e abbiamo eliminato la necessità di fare il preload delle immagini.

Se fin'ora avete testato il nostro lavoro con Internet Explorer (Win o Mac), avrete notato senza dubbi che l'effetto rollover, applicato sopra, non funziona. Il problema è dovuto al fatto che IE applica la pseudo-classe :hover all'elemento ancora e a nient'altro. Per far cambiare entrambe le immagini della tecnica Sliding Doord, avremmo bisogno di inserire un elemento addizionale (come uno SPAN) all'interno dell'ancora e spostare tutte le nostre regole di stile in un elemento interno (le regole delle voci elenco si spostano all'ancora, le regole dell'ancora si spostano nello SPAN).

Non vedremo nel dettaglio gli aggiustamenti richiesti per ottenere l'effetto rollover in IE. Ma fare una prova è possibile, il risultato degli aggiustamenti lo vediamo nell'Esempio 8A. Come potete vedere, lo spostamento delle regole di ogni elemento elimina anche quel piccolo spazio vuoto che abbiamo menzionato nella Parte I, perchè l'ancora adesso contiene l'intero tab.

I rollover sono spesso (più o meno) effetti decorativi. Alcuni di voi potrebbero decidere di non aggiungere il markup necessario per farli funzionare in Internet Explorer. Altri potrebbero decide che gli SPAN aggiuntivi sono soltanto un piccolo sacrificio da fare per avere rollover funzionanti in tutti i browser più popolari e per eliminare lo spazio vuoto dei precedenti esempi. Inserire o meno il markup aggiuntivo è una scelta vostra.

Un rimedio per la zona cliccabile

Come nel caso dei nostri esempi di tab menu nella Parte I, i link di navigazione possono essere trasformati in elementi block-level, per poi impostare un valore di padding aggiuntivo che ingrandisca la zona cliccabile del link. La zona visibile è spesso riempita con un colore di sfondo (o un immagine di sfondo nel nostro caso) che fa capire all'utente che può cliccare ovunque all'interno di questa zona, e non soltanto sul contenuto del link. In molti browser, quando un elemento "ancora" cambia in un elemento block-level (attraverso i CSS) e un padding aggiuntivo viene applicato a questa ancora, le sue zone visuali e cliccabili si espandono insieme fino a coprire i contenuti ed il padding del link. Sfortunatamente, IE per Windows espande soltanto la zona visuale che confina con la zona cliccabile del contenuto dell'ancora e non include il suo padding:

La zona cliccabile nella maggior parte dei browser si espande all'intera area visibile del tab, invece Internet Explorer per Windows rende cliccabile soltato il testo.

Nella Parte I (e dopo l'Esempio 8a visto sopra), abbiamo brevemente accennato a un piccolo spazio vuoto sul lato sinistro del tab causato dalla transizione dell'immagine con l'angolo trasparente. Inotre abbiamo fatto notare l'esigenza di eliminare questo spazio vuoto. Comunque, la Parte I evita di trattare il problema della limitata "zona cliccabile" in IE per Windows. Questo browser (versione 6.0 e inferiori) soffre di diversi bug in questa implementazione dei CSS. Uno di questi bug produce problemi nell'usabilità e nell'accessibiltà della navigazione basata sui CSS.

Specificando la larghezza o l'altezza dell'ancora costringeremmo magicamente IE ad espandere correttamente le zona cliccabile. Ma fare in questo modo ci impedirebbe di avere una dimensione flessibile delle nostre doorway negli altri browser. Per il nostro esempio di tab menu, si potrebbe pensare di utilizzare come unità di misura "em" per la larghezza o per l'altezza. Questo dimensionerebbe i nostri tab sulla base della grandezza del carattere già ereditata dal testo interno. Ma specificare un'altezza per l'ancora fa impazzire IE per Windows. E a meno che non stiamo utilizzando un carattere monospace per il testo dei nostri tab, specificare una larghezza in em può far diventare incoerente la larghezza del tab quando il testo all'interno viene ridimensionato.

Fortunatamente per noi, possiamo sfruttare un altro difetto di implementazione dei CSS da parte di IE per Windows, forzando l'ingrandimento della zona cliccabile in questo browser senza aver bisogno di impostare una larghezza arbitraria. Tutto quello che bisogna fare è specificare una piccola larghezza per l'ancora. Molti browser presteranno (giustamente) attenzione alla proprietà di larghezza per l'elemento block-level, anche se i contenuti all'interno dell'elemento non sono adatti a quella larghezza. L'elemento si restringerà alla larghezza specificata anche se questo comporta al testo all'interno di urtare i confini dell'elemento. Ma IE per Windows restringe l'elemento soltanto alla larghezza della più lunga linea di testo non a capo in esso contenuta.

Così anche se noi specifichiamo una minuscola larghezza per l'ancora (come .1em), IE per Windows permetterà tranquillamente all'ancora di essere estesa quanto il testo all'interno. Allo stesso tempo, IE espanderà la zona cliccabile fino a riempire l'intero tab:

#header a {
  float:left;
  display:block;
  width:.1em;
  background:url("right.gif")
    no-repeat right top;
  padding:5px 15px 4px 6px;
  text-decoration:none;
  font-weight:bold;
  color:#765;
  }

Il fatto che i due concetti lavorino in direzioni opposte è un controsenso. Ma funziona e risolve il problema della zona cliccabile in IE per Windows. Teniamo a mente che gli altri browser rispettano questa specifica e davvero tenteranno di contrarre la larghezza di ogni tab a .1em più il valore di padding. Fortunatamente, IE per Windows (versione 6.0 e inferiori) non interpreta neanche il selettore CSS figlio così possiamo utilizzarne uno per resettare la larghezza dell'ancora in "auto" per tutti gli altri browser, permettendo ai tab di espandersi e contrarsi normalmente:

#header > ul a {width:auto;}

L'Esempio 9 mostra il rimedio al problema della zona cliccabile in IE/Win e il piccolo hack per IE, invisibile a tutti gli altri browser.

Puntare ai Tab

In tutti gli esempi nella Parte I ho utilizzato un ID applicato alle singole voci dell'elenco per modificare l'aspetto del tab "corrente". L'effetto di spostare l'ID da una voce dell'elenco ad un'altra è un concetto facile da capire. Eppure un significato alternato per puntare al tab corrente può risultare in molti casi più efficente, anche se aggiunge un piccola quantità di markup.

Anzichè utilizzare un singolo id="current" per identificare il tab corrente nel markup, possiamo applicare un ID univoco ad ogni voce della lista in questo modo:

<div id="header">
  <ul>
    <li id="nav-home"><a href="#">Home</a></li>
    <li id="nav-news"><a href="#">News</a></li>
    <li id="nav-products"><a href="#">Products</a></li>
    <li id="nav-about"><a href="#">About</a></li>
    <li id="nav-contact"><a href="#">Contact</a></li>
  </ul>
</div>

Inoltre applichiamo un ID all'elemento contenitore più grande (come il body). Il valore di ID corrisponde a una sezione nella quale questa pagina va bene. Questo ID body può anche essere usato per aggiungere uno stile univoco alla specifica sezione per altre porzioni della pagina. Con gli ID in entrambi i posti, possiamo modificare l'aspetto di un certo tab se si soddisfano le condizioni dei selettori discendenti. Piuttosto che usare #current come parte del nostro selettore, possiamo usare le combinazione degli ID del body e delle voci dell'elenco per impostare le condizioni per cui un tab venga considerato "corrente":

#home #nav-home, #news #nav-news,
#products #nav-products, 
#about #nav-about,
#contact #nav-contact {
  background-position:0% -150px;
  border-width:0;
  }
#home #nav-home a, 
#news #nav-news a,
#products #nav-products a, 
#about #nav-about a,
#contact #nav-contact a {
  background-position:100% -150px;
  color:#333;
  padding-bottom:5px;
  }

L'Esempio 10 mostra l'effetto che si ottiene applicando id="news" al body, e l'Esempio 10a mostra cosa succede quando il body utilizza id="products". {Nota dell'editore: il sistema di navigazione di A List Apart utilizza gli ID body in questo modo.}

Note aggiuntive

Box superiori: Potreste avere moduli espandibili nelle vostre pagine che tracciano un box attorno all'header e al suo contenuto. Presumendo che state usando un contenitore (come un div) che include l'header del modulo e il contenuto, avete già i due elementi per ogni immagine di sfondo (div e header). In questo caso, vorrete probabilmente mettere l'immagine più stretta sulla destra, come mostrato nell'Esempio 2. Questo vi fornisce il completo controllo sul punto sinistro di partenza del testo dell'header. Dissolvete la parte inferiore di ogni immmagine nel colore di sfondo del box contenitore così le due immagini sembreranno mescolarsi insieme come unica immagine.

Cambiare lateralmente: Se potete prevedere in modo semplice l'altezza di un elemento dell'interfaccia, (o se create un immagine abbastanza grande da adattarsi all'espansione verticale) potete girare la "doorway" sul suo lato, utilizzando un immagine per la parte superiore ed una per quella inferiore (al posto di destra e sinistra). Ricordate di tenere in considerazione la massima larghezza del testo non a capo che si ottiene quando si ingrandinsce la dimensione del testo con il browser.

Sfarfallio in IE: se in IE per Windows notate uno sfarfallio delle immagini quando passate con il puntantore del mouse sui tab, controllate le impostazioni della cache per i file temporanei (Strumenti > Opzioni Internet > Generale > Impostazioni). Potreste aver cambiato le impostazioni di default per essere sicuri di vedere l'ultima versione della pagina ad ogni refresh. IE per Windows ha difficoltà a mantenere l'immagine di sfondo ferma sull'ancora se nelle impostazioni per i file temporaranei si mette "All'apertura della pagina". Il valore di default è "Automaticamente" e permette al browser di recuperare immediatamente l'immagine dalla cache, evitando ogni sfarfallio. Molti utenti non hanno mai cambiato questa impostazione e probabilmente neanche sanno che esiste.

Tab con più parole: Spesso accade di dover utilizzare per un tab del testo composto da più di una singola parola. In questo caso, per evita al testo del tab di andare a capo in alcuni browser, basta aggiungere una dichiarazione white-space:nowrap; alla regola dell'ancora.

È probabile che ci siano altri problemi o ulteriori cambiamenti o varianti da fare a questa tecnica. Ma noi per il momento ci fermiamo qui. Sperando di aver colmato le lacune e risolto i dubbi sull'utilità e sull'estensibilità della tecnica Sliding Doors.

^Top

Dai un voto a questo articolo:   HITS: 127075 | VOTI: 43 | MEDIA VOTI: 8.9    

Home:: Html:: Principi:: How To:: Download:: Tips:: Link:: Collabora:: Partners:: News&Updates:: Contatto:: Info

© 2001 - 2006 Giuseppe Di Carlo :: Riproduzione vietata ::

Utenti on line: 6