Blog Tool Box

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 :

Icone lien externe

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 :

Icone lien externe

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.

  • Jack NUMBER

    Merci pour cette astuce. Et vivement le nouveau design de BTB !!

  • kamal

    Merci pour le code :)

  • Pierre

    Très simple effectivement. Merci pour l’astuce.

  • Domitille

    merci, ça fait un petit moment que je cherchais comment faire comme Wikipédia ! et là hop, sans chercher je tombe dessus ! merci pour ce blog.
    j’aimerais migrer vers WordPress, quelqu’un connait-il une astuce (+1300 articles et+ 4000 commentaires…)