Problemi Derivanti Dall Hover Su Elementi Arbitrari

Summary: Thanks to long-standing limitations, we're used to thinking of hover styles as applying only to hyperlinks, which has led to some sloppy authoring practices that are now causing problems for some Web sites. This technote explains the source of the problems and how to avoid encountering them.

Molti sviluppatori fanno uso della pseudo-classe CSS2 :hover per applicare uno stile ai collegamenti. Questa innovazione, introdotta per la prima volta da Microsoft® Internet Explorer e poi introdotta nelle specifiche CSS, è molto utilizzata per modificare i collegamenti testuali, in particolare quelli che sono si vuole far apparire e agire come "rollover" in JavaScript. Tuttavia, il progredire del supporto ai CSS da parte dei browser, ha portato in qualche caso ad un utilizzo spregiudicato di questa funzionalità.

Hover ed elementi che non sono collegamenti

La Sezione 5.11.3 dei CSS2 definisce tre pseudo-classi dinamiche (:hover, :active, e :focus) e dice:

La specifica non definisce quali elementi possano essere nei suddetti stati, o come si entra e si esce da tali stati. Uno scipt può modificare se certi elementi reagiscono o meno agli eventi geenrati dall'utente, e su dispositivi differenti ci possono essere differenti metodi di puntamento e attivazione.

Quindi, benchè gli sviluppatori siano abituati a pensare che questi stati si applicano esclusivamente ai collegamenti, in realtà non ci sono tali limitazioni nei CSS2. Ogni elemento, in teoria, potrebbe assumere uno dei tre stati sopra elencati, e quindi assumere lo stile ad essi associato.

Pseudo-classi generiche

La seconda parte del problema si manifesta quando si considera l'effetto della pseudo-classe generica nel selettore. Per esempio:

:hover {color: red;}

Questo è equivalente alla regola CSS2:

*:hover {color: red;}

..che si traduce in "ogni elemento su cui si passa deve assumere il colore rosso". Quindi, passando sopra paragrafi, tabelle, intestazioni e ogni altro elemento in un documento, dovrebbe far diventare il testo rosso.

Una comune variante è utilizzare insieme una classe generica e la pseudo-classe hover, come in questo caso:

.nav:hover {color: red;}

Nei casi in cui la classe nav viene applicata solo a collegamenti, non si verificano problemi. Ma nei casi comuni in cui è associata anche ad altri marcatori, come in questo caso:

<td class="nav">
<a href="one.html" class="nav">one</a> | 
<a href="two.html" class="nav">two</a> | 
<a href="thr.html" class="nav">three</a> | 
<a href="fou.html" class="nav">four</a>
</td>

Poichè si applica la classe nav anche alla cella della tabella, anche i caratteri esterni ai collegamenti (|) diventeranno rossi quando l'utente passerà con il puntatore del mouse sopra un qualsiasi punto della tabella, oltre che quando passerà sopra i collegamenti.

Il comportamento di Gecko

In browser basati su Netscape Gecko build 20020410 o successivi (Netscape 6.1+), gli stili associati a :hover possono essere applicati a qualsiasi elemento del documento. Quindi gli sviluppatori che utilizzano pseudo-classi generiche, o combinazioni simili, sono a rischio di vedere questi stili applicati ad altri elementi oltre che ai collegamenti. Il metodo più corretto di correggere questo problema è aggiungere il giusto marcatore come selettore dello stile, come in questo esempio:

a:hover {color: red;}
a.nav:hover {color: red;}

In un tentativo di evitare l'insorgere di problemi con vecchie pagine, i browser basati su Mozilla 1.0 e successivi (Netscape 7+) includono un accorgimento che restringe l'applicazione di pseudo-classi generiche solo ai collegamenti, nel caso in cui il documento venga interpretato nel modo "quirks". Nei browser basati sul motore di Mozilla 1.3b e successivi, questa modalità viene estesa a comprendere selettori che combinano classi generiche con la pseudo-classe :hover (si veda bug 169078 per dettagli).

Problemi dei collegamenti con attributo Name

In aggiunti agli effetti sopra descritti, ci sono due altri effetti relativamente comuni, che gli sviluppatori possono non aspettarsi. Uno può essere facilmente corretto con la validazione, ma il secondo è un po' più sottile.

Prima di tutto, c'è il problema degli sviluppatori che utilizzano collegamenti con attributo Name, senza marcatore di chiusura. Per esempio:

<a name="pagetop">
<h2>My Page</h2>

Senza un </a>, tutto quanto viene dopo viene formalmente considerato come facente parte del collegamento. E questo generalmente significa che tutto il resto del documento assume lo stile associato a hover. Si consideri l'effetto generato da questo stile:

a:hover {color: red;}

In un documento con un collegamento con attributo Name e che non viene correttamente chiuso, tutto il testo che segue l'apertura del collegamento, assumerà il colore rosso (sempre che un'altra regola del CSS non intervenga).

Questo ci porta al secondo problema, che consiste nel fatto che collegamenti con attributo Name possono avere stile hover. Benchè gli sviluppatori vogliano che il selettore a:hover sia associato solo ai veri collegamenti, esso sarà associato anche a quelli con attributo Name, dato che il selettore dichiara semplicemente che qualsiasi elemento a può passare nello stato hover. Per evitare questo problema, gli sviluppatori possono utilizzare una sintassi con pseudo-classi multiple descritta nei CSS2:

a:link:hover {color: red;}
a:visited:hover {color: maroon;}

Si noti che, con questa sintassi, è possibile associare stili diversi a collegamenti visitati e non visitati, quando ci si passa sopra con il puntatore del mouse. Questo non era possibile con il solo a:hover. Ovviamente questo significa che il selettore a:link:hover si applica solamente ai collegamenti non visitati, per cui gli sviluppatori che vogliono applicare lo stesso stile sia a collegamenti visitati e non visitati, devono raggruppare i due selettori in una regola singola.

Raccomandazioni

Per evitare problemi inattesi, gli sviluppatori sono fortemente incoraggiati ad associare nomi agli elementi che usano pseudo-classi dinamiche per i collegamenti. Inoltre, le pseudo-classi multiple evitano che gli stili hover siano applicati a collegamenti non reali. Quindi, usare sempre a:hover invece di :hover, e a:link:hover (e a:visited:hover) sono preferiti al più semplice a:hover.

Collegamenti

• The dynamic pseudo-classes: :hover, :active, and :focus