![[Lexicon: il nostro logo il ponte di Rialto e lo slogan Bridging communication]](../../img/lexicon-translations.gif "Logo di Lexicon - bridging communication")
Rollover CSS grafici e accessibili
Traduzione dell'articolo
Accessible Image-Tab Rollovers di Dan Cederholm che propone una tecnica per realizzare rollover grafici e accessibili tramite CSS senza l'uso di javascript e il precaricamento.Recentemente ho implementato un nuovo sistema di navigazione basato su rollover css per Fast Company e credo sia di indubbio interesse documentare l'intero processo.
Il problema
Avvertivamo la necessità di inserire più elementi nella barra di navigazione principale di Fast Company ma mancava la spazio. Il menù era composto da una lista semplice non ordinata realizzata tramite CSS. Ad una risoluzione di 800x600 non vi era sufficiente spazio orizzontale per aggiungere nuove opzioni di navigazione.
La soluzione
Ho deciso di combinare e modificare le tecniche utilizzate in Pixy's brilliant Fast Rollovers e in Stuart Langridge's accessible image replacement per creare rollover di immagini accessibili e privi di codice javascript.
Vediamone il funzionamento:
L'Xhtml: Una lista determina la posizione di tutte le altre
Volevo continuare ad utilizzare per la navigazione una lista semplice non ordinata. Molto si è detto sulle liste sia in questo sito che in altri: utilizzano codice compatto, "leggero" e accessibile ai browser testuali, agli screenreader, ai palmari, ecc.
Ecco come appariva in origine la lista (ho eliminato evidentemente alcune opzioni per rendere più snello l'esempio)
<ul id="nav">
<li><a href="/" class="selected">Home</a></li>
<li><a href="/guides/">Guides</a></li>
<li><a href="/magazine/">Magazine</a></li>
<li><a href="/articles/">Archives</a></li>
</ul>
Semplice ed efficace. Ora proviamo a inserire un unico id a ciascun li. In questo modo possiamo sostituire dei tasti stilizzati al testo piuttosto noioso.
<ul id="nav">
<li id="thome"><a href="/" class="selected">Home</a></li>
<li id="tguides"><a href="/guides/">Guides</a></li>
<li id="tmag"><a href="/magazine/">Magazine</a></li>
<li id="tarchives"><a href="/articles/">Archives</a></li>
</ul>
Ora possiamo creare le immagini dei tasti.
Un'immagine, 3 stati
In estrema sintesi la tecnica dei CSS Fast Rollover di Pixy prevede di creare un'immagine per ciascuna opzione di navigazione che includa gli stati normal, hover e active. In seguito utilizzeremo codice CSS per modificare la background-position in modo tale da rivelare ciascuno stato al momento opportuno.
Figura 1.1
Figura 1.1 un'immagine di esempio che ho creato per la nuova barra di navigazione di Fast Company. A ciascun stato corrisponde una porzione di immagine di 20px in altezza, l'intera immagine di conseguenza misura 60px. Ai primi 20px corrisponde lo stato normal, ai successivi 20px lo stato hover e infine agli ultimi 20px lo stato active (che è utilizzato inoltre per comunicare all'utente la sua posizione nel sito: "tu sei qui"). Si possono creare immagini simili per ciascun tasto che vogliamo utilizzare.
L'uso di una singola immagine per ciascuno stato ci permette di evitare l'utilizzo di complicato e fastidioso codice Javascript e di ottenere l'effetto hover con del più semplice codice CSS. Questo ci consente anche di eliminare l'effetto "flicker" a cui sono soggette altre tecniche CSS che prevedono l'utilizzo di immagini distinte per identificare i vari stati. Questa tecnica inoltre ci permette di non dover effettuare il precaricamento di ogni immagine addizionale.
Ecco il codice CSS: la magia diventa realtà
In primo luogo sarà necessario definire le regole comuni a tutti le opzioni di navigazione. Questo ci permette di non dover replicare lo stesso codice per ciascun tasto. A questo punto potremo definire regole specifiche per ciascuna lista di elementi id, assegnando a ciascun li la sua immagine di sfondo e la sua larghezza, le uniche due variabili che differiscono tra i tasti.
Un esempio di codice CSS potrebbe essere questo:
#nav {
margin: 0;
padding: 0;
height: 20px;
list-style: none;
display: inline;
overflow: hidden;
}
#nav li {
margin: 0;
padding: 0;
list-style: none;
display: inline;
}
#nav a {
float: left;
padding: 20px 0 0 0;
overflow: hidden;
height: 0px !important;
height /**/:20px; /* for IE5/Win only */
}
#nav a:hover {
background-position: 0 -20px;
}
#nav a:active, #nav a.selected {
background-position: 0 -40px;
}In estrema sintesi il codice elimina il padding e gli stili della lista, dispone orizzontalmente gli elementi della lista stessa e nasconde il testo che si trova all'interno di ciascun link. Questo codice è generico per ciascun elemento che si trovi all'interno dell'id #nav, in questo modo non è necessario ripetere la stessa regola più volte.
Abbiamo anche definito una classe "selected" e cioè per quel tasto che voglio evidenziare in maniera permanente per indicare la sezione del sito in cui attualmente vi trovate. Questo è ottenuto attraverso lo stato :active.
Si noti che il codice list-style:none; e display: inline; è ripetuto sia nel selettore #nav che #nav li. Questo permette di rendere compatibile il codice anche con Internet Explorer 5 per Windows. Ovviamente in un mondo perfetto la sola dichiarazione nel selettore #nav sarebbe stata sufficiente. Purtroppo non viviamo in un mondo simile!
La prossima mossa consiste nel definire le regole di ciascun id e di assegnarli la sua background-image e la sua larghezza. Ecco un esempio.
#thome a { width: 40px; background: url(home.gif) top left no-repeat; }
Si dovrebbe operare in modo simile per ogni tasto della barra di navigazione.
Il risultato
Figura 1.2
La Figura 1.2 mostra il risultato di tutta l'operazione: i tasti grafici per ciascuno stato, normal, hover e selected. Per vedere il tutto all'opera consultate questa pagina dotata di un esempio funzionante e del codice relativo (working example with sourcecode) o, ancora meglio, andate a visitare il sito fastcompany.com.
Perché usare questa tecnica?
- È leggera: il codice è composta da una sola lista non ordinata
- È accessibile: utilizzando la tecnica di Stuart assicuriamo agli screenreader di leggere i link testuali associati alle immagini
- Non necessita di codice Javascript: non vi è la necessità di creare prima e precaricare poi un'immagine per ciascuno stato e, inoltre, non serve utilizzare codice Javascript per la gestione dell'effetto hover. Grazie Pixy!
- È grafico: l'inserimento dei collegamenti ipertestuali in una area nascosta permette di creare immagini stilizzate
Un attimo... Il testo non è ridimensionabile!
Seguendo l'ottimo suggerimento [ a great suggestion ] di doug Bowman [ Doug Bowman ] e cercando di aumentare la leggibilità (essendo impossibile ridimensionare le immagini), ho deciso di creare un secondo set di immagini con delle etichette di testo molto più grandi definendo poi delle regole specifiche associate agli stili "medio" (tasti originali) e "largo" (tasti con etichette più grandi). Per alternare gli stylesheet ho utilizzato la tecnica di Paul Sowden's Stylesheet switcher.
Di seguito il codice di esempio della regola sovrascritta: appare evidente che differisce dall'originale solo per la larghezza e il nome dell'immagine;
#thome a { width: 46px; background: url(guides_lg.gif) top left no-repeat; }
Figura 1.3
La Figura 1.3 mostra i tasti con le etichette più grandi che ho utilizzato nel sito di Fast Company; si noti come lo spazio orizzontale si sia ristretto mentre quello verticale sia immutato. Dando la possibilità di aumentare la grandezza dei collegamenti individuati da ciascuna etichetta aiutiamo eventuali utenti con problemi di vista, mantenendo comunque un design accettabile. Grazie a Doug per la soluzione del problema.
Compatibilità
Testato e funzionante su Windows utilizzando i seguenti browser: Mozilla, Netscape7, IE5.0+; Mac: Mozilla, Camino, IE5, Safari.
Per Fast Company ho scelto il posizionamento assoluto del selettore #nav in modo da far combaciare perfettamente tutti gli elementi della pagina permettendo al colore di sfondo dell'area superiore della pagina di essere posta sotto i tasti. Tutto funziona perfettamente tranne che con Opera7 per Windows; con questo browser è necessario infatti specificare una larghezza per elementi posizionati in modo assoluto. Non c'è problema! A tal fine è sufficiente aggiungere al codice la larghezza totale delle immagini nel selettore #nav:
#nav {
margin: 0;
padding: 0;
height: 20px;
list-style: none;
display: inline;
overflow: hidden;
width: 201px;
}Ora possiamo dormire sonni tranquilli e ci apprezzeranno anche i fan di Opera..
Sentiti ringraziamenti a Paul Maiorana per avermi suggerito l'idea.
30 Settembre 2003
Copyright © 1999-2004 Dan Cederholm - Rollover css, tutti i diritti riservati. Creato da Movable Type & SimplePost.
Traduzione a cura di Enrico Ladogana.
Web design: