Le retour des liens soulignés ?

Les pionniers du web ont choisi de souligner les liens hypertextes qui permettent de relier deux pages. C’est une convention pour repérer très simplement quels sont les mots qui sont aussi des liens, mais si cette présentation est pratique, elle a longtemps été assez grossièrement appliquée. Pendant longtemps, les navigateurs se sont contentés d’appliquer un trait sous le texte un peu grossièrement, sans tenir compte de la présentation, coupant les lettres et souvent en ajoutant une gène visuelle. À tel point que beaucoup de sites les ont finalement retirés, jusqu’à Google lui-même.

Comme beaucoup de sites, j’avais également choisi de retirer tous les traits sous les liens de mon blog personnel. Pour signaler la présence d’un lien, je changeais la couleur en noircissant légèrement le texte. L’idée était bonne, mais le résultat n’était pas vraiment à la hauteur : les liens étaient difficiles à détecter correctement, et j’imagine que la majorité des lecteurs ne les voyait jamais. Dans l’idéal, j’aurais voulu mettre en place la solution de Medium (longuement détaillée à cette adresse : si le sujet vous intéresse, je vous en recommande la lecture), mais elle est très complexe et mes connaissances en CSS sont trop limitées.

Fort heureusement, les navigateurs évoluent. Et les dernières versions de Safari, le navigateur d’Apple, gèrent désormais plutôt bien les liens soulignés, comme l’a judicieusement fait remarquer Anthony. En particulier, les traits ne coupent plus bêtement les lettres qui passent sous la ligne, ils s’interrompent proprement autour de la lettre.

liens-soulignes-safari

Du coup, j’ai réactivé les liens soulignés sur le blog. Ce n’est pas parfait, c’est moins bien que la solution de Medium — j’aimerais des traits légèrement affinés —, mais c’est beaucoup plus simple à mettre en place et avec Safari, le rendu est plutôt sympa. Pour les autres navigateurs, on peut espérer qu’ils s’y mettent aussi un jour, et en attendant, les liens sont beaucoup plus visibles ainsi qu’en variant la couleur comme je le faisais auparavant.

Côté code, c’est assez simple, il suffit d’une ligne en CSS sur la balise a (celle des liens) et c’est fait. Le plus souvent, les thèmes utilisaient text-decoration: none; pour masquer les traits sous les liens et on peut ainsi la remplacer par text-decoration: underline; pour obtenir le bon résultat.

Sur mon blog, je modifie aussi la couleur par défaut des liens (bleu, si vous ne précisez rien) en reprenant celle de l’élément parent, en l’occurrence le texte des articles. À vous de voir si vous voulez doubler le lien avec une couleur différente. Pour ma part, j’ai opté uniquement pour une couleur différente quand le curseur de la souris passe au-dessus du lien, ici du noir pour l’exemple.

a{
    text-decoration: underline;
    color:inherit;
}
a:hover{
    color:black;
}

Je ne sais pas si je garderai ces liens soulignés ou si je changerai à l’avenir, mais j’aime bien l’idée de rendre les liens plus visibles. Du moins ceux à l’intérieur des articles, pour tous les liens autour, par exemple pour les listes de tags, je préfère une présentation plus propre, sans aucun trait. Mais peut-être ai-je tort et que les liens devraient toujours être soulignés.

Publicités

Répondre

Entrez vos coordonnées ci-dessous ou cliquez sur une icône pour vous connecter:

Logo WordPress.com

Vous commentez à l'aide de votre compte WordPress.com. Déconnexion /  Changer )

Photo Google

Vous commentez à l'aide de votre compte Google. Déconnexion /  Changer )

Image Twitter

Vous commentez à l'aide de votre compte Twitter. Déconnexion /  Changer )

Photo Facebook

Vous commentez à l'aide de votre compte Facebook. Déconnexion /  Changer )

Connexion à %s