Ordre des pseudo-classes des liens

LoVe Fuck HAte

2 avril 2010,
par Romy Têtue

Mots-clefs associés à cet article :

Pour styler les liens, l’ordre dans lequel sont déclarées pseudo-classes est important. Pour le retenir, dites : LoVe Fuck HAte !

On ne se soucie pas assez de signaler les différents états d’un lien. C’est un défaut d’ergonomie d’autant plus dommage que l’hyperlien est le fondement de la navigation sur le Web et qu’il est facile d’améliorer cela. Faciliter le repérage du lien pointé ou actif, faciliter l’identification des contenus déjà visités [1]… cela se fait en quelques lignes de CSS, avec les « pseudo-classes ». Mais attention à l’ordre !

Style des différents états des liens

Les pseudo-classes constituent des classes prédéfinies en CSS. Elles s’appliquent à certains éléments dont l’état peut changer. Les plus connues et plus populaires concernent les liens hypertextes qui possèdent plusieurs états : visité, actif et non visité, sans oublier le survol et le focus. À chacun correspond une pseudo-classe.

Il est important de déclarer ces pseudo-classes dans cet ordre :

  1. link
  2. visited
  3. focus
  4. hover
  5. active

Par exemple, pour modifier la couleur des liens selon leur état :

a { color: blue; }
a:link {} /* lien non-visité */
a:visited { color: purple; } /* lien visité */
a:focus { color: green; } /* lien visé */
a:hover { color: green; } /* lien survolé */
a:active { color: red; } /* lien activé */

En pratique, on commence par styler génériquement a { … } et on s’en contente souvent.

Quand on veut bien faire, on précise chaque état, distinctement : les liens visités avec a:visited { … } puis liens les ciblés, avec ces trois pseudo-classes d’un coup : a:focus, a:hover, a:active { … }.

La règle a:hover doit être placée après a:link et a:visited, sinon la cascade fera que la propriété color spécifiée sera cachée. Il est excessivement rare d’avoir à définir a:link.

Pour retenir cet ordre, l’astuce mnémotechnique habituelle est l’expression « LoVe HAte », — deux mots fameux que le terrifiant pasteur du film La Nuit du chasseur avait tatoués sur les phalanges de ses doigts —, où les lettres en majuscule signalent ici la première lettre de chaque pseudo-classe, dans le bon ordre… but what of :focus ? Pour s’en rappeler, n’oublions pas ce qui trouve naturellement sa place entre l’amour et la haine : « LoVe Fuck HAte ».
J’aimerais lui préférer une expression francophone plus simple et plus élégante, mais je n’ai pas encore trouvé mieux.

{#TITRE,#URL_ARTICLE,#INTRODUCTION}

Vos commentaires

  • Le 2 avril 2010 à 16:36, par Maïeul En réponse à : LoVe Fuck HAte

    Merci Romy pour cette info que j’ignorai.

    Pour ton dernier paragraphe, rassure toi, la plupart du
    temps, les outils mnémotechniques de ce genre sont souvent assez débiles.

    Du genre : Oh Be a Nice Girl Kiss Me Right Now Sweetheart pour apprendre la classification astrophysique des étoiles. Un brin misogyne les astronomes ?

    Sans compter le fameux Hornicar que je n’ai jamais croisé de ma vie, même si je le cherche. Mais où est-il donc ?

  • Le 2 avril 2010 à 17:02, par Florent V. En réponse à : LoVe Fuck HAte

    Pour ma part je suis un mécréant en matière de styles de liens. Je ne style jamais :link, jamais vu l’utilisé. J’ai du mal à blairer :visited, donc je ne le style pas (et les deux ou trois fois où j’ai pris l’initiative de le faire sur une intégration, parce qu’il parait qu’il faut le faire, le client n’en voulait pas, donc bon). Quand à :active, je le trouve inutile pour les interfaces au clavier et à la souris, et un peu plus utile pour les interfaces tactiles, donc je vais peut-être commencer à l’utiliser.
    Donc au final j’ai rien à retenir, c’est pas plus mal.
    (Et puis marre de compléter à l’intégration le boulot des webdesigners qui n’ont pas le souci du détail.)

  • Le 7 mai 2010 à 13:34, par anonyme En réponse à : LoVe Fuck HAte

    Fuck —> Fear
    peut etre plus elegant ;)

    pour l’interpretation, la peur conduit à la haine (et maitre yoda completera)

    (bon pour justivier le passage de l’amour à la peur, je sais pas ;) )

Répondre à cet article

Qui êtes-vous ?

Pour afficher votre trombine avec votre message, enregistrez-la d’abord sur gravatar.com (gratuit et indolore) et n’oubliez pas d’indiquer votre adresse e-mail ici.

Ajoutez votre commentaire ici
  • Raccourcis : {{gras}} {italique} -liste [bla->url] <q> <quote> <code>.

Suivre les commentaires : RSS 2.0 | Atom