Toujours à la recherche des moyens me permettant de me conformer à toutes les bonnes pratiques d'Opquast — il m'en reste deux à remplir aujourd'hui et ce billet concerne la première — j'ai cherché un moyen de différencier les liens externes (qui pointent sur un site externe à celui-ci) des liens internes.
Une petite recherche Google m'a fait rapidement comprendre qu'il n'y avait pas de solutions totalement accessible à ce jour, sauf bien sûr à reprendre tous mes billets et tous les liens qui s'y trouvent, et à rajouter pour chacun une mention textuelle indiquant si le lien est externe ou pas. Je vous avoue tout de suite que la simple idée de reprendre les quelques 800 billets de ce blog m'effraie un peu.
Pour l'instant, je me suis limité à utiliser des règles CSS 3 pour obtenir l'affichage d'une petite image à la suite des seuls liens externes (j'en ai profité pour mettre également un petit symbole à la suite des adresses email). Bien sûr ce système a des limitations. Premièrement il n'est accessible qu'aux personnes voyantes et qui n'ont pas désactivé l'affichage des feuilles de style, qui utilisent un navigateur qui interprète correctement ces règles et qui n'utilisent pas un agrégateur RSS[1].
Les images utilisées, qui ont été imaginées par Nate, sont :
: pour les liens externes
: pour les adresses email
Les règles utilisées, qui ont été adaptées de celles indiquées par William Cox — qu'il a lui même adapté des originales fournies par Stuart, sont les suivantes :
a[href^="mailto:"] {
background: transparent url('img/aemail.gif') right center no-repeat;
padding-right: 10px;
}
#content a[href^="http:"] {
background: transparent url('img/aoutside.gif') right center no-repeat;
padding-right: 10px;
}
#content a[href^="http://franck.paul.free.fr"] {
background: inherit;
padding-right: 0px;
}
La première sert pour les adresses email, la deuxième sera utilisée pour tous les liens commençant par http:, la troisième permet d'ignorer les liens internes. C'est tout ce que je peux faire à ce jour pour me conformer à cette bonne pratique.
Notes
[1] J'aimerais trouver une alternative textuelle à l'image, au moins pour les lecteurs d'écrans. Alors si quelqu'un a des idées, qu'il n'hésite pas ! Existe-t-il une technique CSS qui permettrait de compléter l'attribut title avec la mention (lien externe) uniquement pour les liens externes ?
1 De Guillaume -
Salut Franck,
Je me permets de rajouter un petit lien d'un post de Neolao sur le sujet qui complete bien ce que tu viens de décrire : Personnaliser les liens
Tu verras qu'il différencie les liens externes, internes, visites et email. Les explications sont très claires
2 De Franck -
Merci Guillaume (je me suis permis de modifier légèrement ton commentaire pour faire apparaitre le lien cliquable). Il utilise en effet une approche légèrement différente mais toujours en utilisant le CSS 3.
3 De Vinch -
Moi j'utilise l'attribut rel="external" dans mes liens externes. Ca me permet de les mettre en forme en CSS via le selecteur a[rel=external] et d'appliquer un Javascript (ou JQuery) qui va ouvrir le lien dans une nouvelle fenêtre (ça évite d'utiliser target="_blank" qui ne passe pas en syntaxe stricte). Voir ce tutoriel : http://www.sitepoint.com/article/standards-compliant-world
4 De Franck -
Si je veux faire ça il faut que je reprenne tous mes billets — j'ai jeté un oeil et j'en ai pas loin de 400 dans ce cas — qui contiennent des liens externes, que je les bascule au format XHTML vu que j'utilise quasiment exclusivement le format Wiki et que je rajoute l'attribut.
C'est bizarre, j'ai l'impression que je vais y passer un moment, non ?
Ceci dit, ça ne résoud pas le problème d'accessibilité avec un lecteur d'écran. De plus, je ne souhaite pas imposer l'ouverture d'une nouvelle fenêtre pour les liens externes. C'est au visiteur de choisir sa façon de naviguer.
5 De Tomtom -
Salut franck,
sympa cette petite astuce, je mettrais ça en place ce soir chez moi ;)
Sinon pour ton alternative textuelle, je verrais bien un simple script en javascript qui scanne le contenu du billet pour rajouter sur les liens la mention que tu veux. Il suffirai simplement de l'inclure dans la boucle du et dans le
6 De Franck -
C'est en effet une solution sauf que c'est à mettre du côté de l'entête avec exécution une fois que la page est chargée. Une autre possibilité est de faire le pré-traitement en PHP au moment de l'affichage, ce qui a l'avantage à bien y réfléchir de fonctionner même si le client a désactivé le javascript.
7 De Tomtom -
Oui aussi, avec des regexp, ça peut le faire, reste plus qu'a le faire ;)