Signaler les liens externes via CSS

Les liens externes, c’est-à-dire les liens qui pointent vers des sites différents du site actuel, doivent être signalés selon les recommandations du W3C. Cela apporte une petite information très utile aux visiteurs lors de la lecture d’un article. Malheureusement ce système est très rarement mis en place. De tête, le seul site connu qui l’utilise est Wikipédia au sein des articles et à l’aide d’une petite icône :

Cette petite astuce est facilement mise en application à l’aide de règles CSS. Pour commencer il faut ajouter deux propriétés à la règle CSS concernant les liens hypertextes :

a{
background:url("external.png") no-repeat scroll right top transparent;
padding:0 13px 0 0;
}

Rien de plus simple, nous ajoutons ici une icône « external.png » en arrière plan à tous les liens. Le padding sert à décaler le texte par rapport à l’icône pour éviter qu’ils ne se superposent.

Il suffit maintenant d’annuler cette même règle pour les liens qui ne sont effectivement pas des liens externes en utilisant les sélecteurs d’attributs en CSS :

a{
background:url("external.png") no-repeat scroll right top transparent;
padding:0 13px 0 0;
}
a[href*="blogtoolbox"]{
padding: 0;
background: none;
}

La seconde règle permet de préciser de nouvelles propriétés pour les liens qui contiennent dans l’attribut href le nom de domaine de notre site. Nous supprimons ici le padding et l’image d’arrière plan de la règle juste au dessus !

Cela donnera ceci :

Ici, le lien « Readability » fait référence à un article du blog donc pas d’icône ! Et les liens « Quix » et « Joost de Valk » pointent vers des sites externes donc l’icône est affichée !

Personnellement cette astuce sera mise en place dans le tout nouveau thème de Blog Tool Box qui viendra avec la prochaine grande version de WordPress.