Problèmes soulevés par le pseudo élément hover

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.

Beaucoup d'auteurs utilisent la pseudo-classe CSS2 :hover pour appliquer un style à leurs liens. Cette innovation, introduite en premier par Microsoft® Internet Explorer et adoptée dans les spécifications CSS, est très populaire pour styler des liens texte, en remplacement des « rollovers » faits en JavaScript. Toutefois, le support avancé de CSS dans les navigateurs a entraîné des comportements agressifs inattendus sur certaines pages.

Hover et éléments non-liens

Le chapitre 5.11.3 de CSS2 définit les trois types de pseudo-classes (:hover, :active, et :focus) et mentionne que :

CSS ne définit pas lesquels des éléments peuvent être dans un de ces états ou comment ceux-ci entrent et sortent de ces états. L'écriture peut varier, selon que les éléments réagissent aux actions de l'utilisateur, ou non, et les divers appareils et agents utilisateurs peuvent avoir différentes façons de désigner ou d'activer les éléments.

Ainsi, bien que les auteurs s'imaginent que ces trois états ne s'appliquent exclusivement qu'aux liens hypertexte, il n'y a pas de limitation dans CSS2. Tout élément peut, en théorie, se trouver dans l'un de ces trois états et être stylé selon ces états. Ce n'était pas traditionnellement le cas.

Pseudo-classes nues

La seconde partie du problème vient lorsque nous considérons les effets d'une pseudo-classe « nue » dans un sélecteur. Par exemple :

:hover {color: red;}

Cette règle est équivalente à la règle CSS2 suivante :

*:hover {color: red;}

…qui se traduit en « tout élément survolé aura sa couleur d'écriture mise en rouge ». Ainsi, le survol de paragraphes, de tableaux, d'en-têtes et tous autres éléments dans un document coloriera le texte en rouge.

Une variante classique consiste à utiliser une classe nue et une pseudo-classe hover comme ceci :

.nav:hover {color: red;}

Les situations où seules les instances de la valeur nav de la classe class sont appliquées aux liens hypertextes fonctionnent correctement. Cependant, les règles de ce type se rencontrent habituellement avec des balises comme ceci :

<td class="nav">
<a href="one.html" class="nav">un</a> | 
<a href="two.html" class="nav">deux</a> | 
<a href="thr.html" class="nav">trois</a> | 
<a href="fou.html" class="nav">quatre</a>
</td>

Comme la cellule du tableau a une class à nav, le caractère barre verticale virera en rouge lorsque l'utilisateur déplacera la souris n'importe où dans la cellule. Les liens vireront également en rouge lorsqu'ils sont survolés.

Comportement de Gecko

Dans les navigateurs basés sur des compilations de Gecko postérieures à 20020410 (Netscape 6.1+), les styles :hover peuvent s'appliquer à n'importe quel élément d'un document. De ce fait, les auteurs qui ont employé des pseudo-classes nues ou leur combinaisons, risquent de voir ce style s'appliquer même à d'autres éléments que leurs liens. La meilleure parade est d'ajouter l'élément ancre aux sélecteurs comme ceci :

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

Pour éviter le plus possible les problèmes avec des documents anciens, les navigateurs basés sur Mozilla 1.0 et suivant (Netscape 7+) incluent du code permettant aux pseudo-classes d'être restreintes aux seuls liens seulement si le document est rendu dans le mode « quirks ». Dans les navigateurs basés sur un moteur postérieure à Mozilla 1.3b, ce mode quirk a été étendu pour couvrir les sélecteurs qui combinent un sélecteur de classe nu avec la pseudo-classes :hover (voir le bug 169078 pour plus de détails).

Problèmes des ancres nommées

En plus des effets précédemment décrit, il y a deux autres effets relativement répandus que les auteurs de pages Web peuvent ne pas désirer. Le premier est facilement corrigible grâce à la validation du document, mais le second est un peu plus subtil.

Tout d'abord, il y a le problème des ancres nommées ouvertes mais non fermées. Par exemple :

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

Sans balise de fermeture </a>, le name englobera la suite du document. Ceci signifie généralement que la suite du document se verra attribuer les styles hover. Considérons les effets de la règle suivante :

a:hover {color: red;}

Dans un document comportant une ancre nommée non fermée, tout texte suivant la balise d'ouverture de l'ancre sera coloré en rouge (à moins qu'une autre règle CSS ne soit définie).

Ceci nous amène au second problème, qui est que les ancres nommées peuvent accepter des styles hover. Bien que les auteurs désirent souvent que le sélecteur a:hover ne s'applique qu'aux hyperliens, il peut également s'appliquer aux ancres nommées, puisque le sélecteur spécifie que chaque élément a sera stylé lors de son survol. Afin d'éviter de problème, les auteurs devraient utiliser la syntaxe de la pseudo-classe combinée décrite dans CSS2 :

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

Remarquez qu'avec cette syntaxe, il est possible de styler les liens visités et non visités différemment lorsqu'ils sont survolés. Ce n'était pas possible avec un simple a:hover. Cela signifie, bien entendu, que le sélecteur a:link:hover ne s'appliquera qu'aux liens non visités, ainsi les auteurs désireux d'obtenir le même style pour les liens visités et non visités lors du survol doivent grouper les deux sélecteurs dans une seule et unique règle.

Recommendation

Pour éviter les problèmes inattendus, les auteurs sont fortement encouragés à inclure des noms d'élément dans les pseudo-classes dynamiques qui sont destinées à être appliquées aux hyperliens. En outre, combiner des pseudo-classes prévient l'application de styles :hover à des ancres qui ne sont pas des hyperliens. Ainsi, a:hover devrait toujours être utilisé à la place du simple :hover, et a:link:hover (et a:visited:hover) sont préférables à un simple a:hover.

Liens connexes

• Les pseudo-classes dynamiques : :hover, :active, et :focus

Interwiki Languages Links