Souligner les liens… mais pas tous !

Vous souhaitez souligner les liens, dans le texte courant, pour mieux les identifier comme tels. D’accord. Mais ce n’est pas utile partout. Par exemple, pas besoin de les souligner dans la barre de navigation, dont l’apparence visuelle suffit à identifier les liens comme tels.

D’une façon générale, on se rend compte qu’on n’a pas besoin de souligner les liens des blocs de navigation et autres menus, car ils y sont clairement identifiables, d’autre manière.

Comment traiter cela en CSS ?
Plusieurs approches possibles :

Souligner uniquement les liens du contenu

La première approche, la plus courante, consiste à cibler le contenu, pour ne souligner que les liens au sein des textes, ici dans « .content ». On écrira donc :

a { text-decoration: none; }
.content a { text-decoration: underline; }

Ça paraît simple. Le problème : comment conserver le souligné des liens positionnés hors de ce bloc de contenu, par exemple dans un texte en colonne latérale ? Et zut, pareil dans le pied de page ! Cette méthode nécessite de rustiner ensuite :

a { text-decoration: none; }
.content a { text-decoration: underline; }

aside p a,
.footer p a { text-decoration: underline; }

Si l’on veut signaler le survol, par exemple en inversant le soulignement, il faudra compléter comme suit :

a { text-decoration: none; }
a:hover { text-decoration: underline; }

.content a { text-decoration: underline; }
.content a:hover { text-decoration: none; }

aside p a,
.footer p a { text-decoration: underline; }
aside p a:hover,
.footer p a:hover { text-decoration: none; }

et ainsi de suite pour chaque état de lien et chaque exception, c’est-à-dire redéfinir à chaque fois, sans en oublier… On s’y emmêle vite les pinceaux !

Par exemple, pour faire des choses courantes comme définir la couleur des liens et modifier le soulignement au survol, sans oublier la barre de navigation :

a { text-decoration: none; }
a:hover { text-decoration: underline; }

.content a { color: green; text-decoration: underline; }
.content a:visited { color: gray; }
.content a:hover { text-decoration: none; }

aside p a,
.footer p a { text-decoration: underline; }
aside p a:visited,
.footer p a:visited { color: gray; }
aside p a:hover,
.footer p a:hover { text-decoration: none; }

.navbar a { padding: .2em; background-color: orange; }
.navbar a:focus,
.navbar a:active { background-color: red; }

Ça devient vite très compliqué… n’est-ce pas ?

Souligner avec un sélecteur dédié

Pour gérer les exceptions, plutôt que de rustiner au cas par cas, on préférera créer un sélecteur dédié, par exemple « .underline », que l’on appliquera aux endroits où l’on souhaite voir les liens soulignés. En CSS, on écrira alors :

a { text-decoration: none; }
.underline a { text-decoration: underline; }

Cela simplifie (un peu) le code CSS, pour obtenir le même rendu que précédemment :

a { text-decoration: none; }
a:hover { text-decoration: underline; }

.underline a { color: green; text-decoration: text-decoration: underline; }
.underline a:visited { color: gray; }
.underline a:hover { text-decoration: none; }

.navbar a { padding: .2em; background-color: orange; }
.navbar a:focus,
.navbar a:active { background-color: red; }

Le problème : c’est verbeux, dans le HTML ! et il n’est pas toujours possible d’accéder au code source pour placer ce sélecteur judicieusement. Il faudra encore rustiner !

Souligner tout, sauf…

La dernière approche (et la meilleure), procède inversement : il s’agit cette fois de souligner tous les liens sauf certains. C’est-à-dire sauf ceux des éléments de navigation.

C’est remarquablement simple à faire ! En effet, il n’y a rien à déclarer pour souligner tous les liens, puisque — ce n’est peut-être pas un hasard — c’est le comportement par défaut dans nos navigateurs.

Il ne nous reste donc plus qu’à cibler les éléments de navigation, que l’on a pris soin d’identifier par le sélecteur « .nav ». En une seule ligne :

.nav a { text-decoration: none; }

C’est très simple ! et aussi plus facile pour définir tous les états des liens. Quelques lignes suffisent pour obtenir le même rendu que précédemment :

a { color: green; }
a:visited { color: gray; }
a:hover { text-decoration: none; }

.nav a { color: inherit; text-decoration: none; }
.nav a:hover { text-decoration: underline; }

.navbar a { padding: .2em; background-color: orange; }
.navbar a:focus,
.navbar a:active { background-color: red; }

C’est nettement plus simple, n’est-ce pas ?

Le souci des méthodes précédentes, c’est qu’elles commencent par annuler le comportement par défaut des liens, ce qui impose de le redéfinir régulièrement par la suite.

D’une façon générale, que ce soit pour les liens ou tout autre chose, lorsque l’on doit gérer des exceptions en CSS, mieux vaut s’appuyer sur le comportement par défaut, plutôt que de commencer par redéfinir celui-ci.