L’astuce du jour : comment supprimer cette horrible bordure autour des liens cliqués

Sacré titre hein. Normal, c’est un sacré billet. Vous est-il déjà arrivé d’avoir un client qui vous demande comment qu’on fait pour supprimer ces horribles bordures qui apparaissent lorsqu’on clique sur les liens ? Je n’en veux pas, c’est moche, c’est moche, allez ouste, hors de ma vue vilaines bodures ? Non ? Moi c’est deux fois pas jour. Et plutôt que de leur répondre « on peut pas, c’est comme ça, si elles sont là, c’est qu’il y a une raison [1]« , je me suis documenté.

En javascript

// rendons à prishablepress ce qui appartient à César, tout le crédit de cette méthode revient à @ http://perishablepress.com/press/2008/12/16/unobtrusive-javascript-remove-link-focus-dotted-border-outlines/
if(document.all)
for(var i in document.links)
document.links[i].onfocus = document.links[i].blur;


En javascript mais avec jquery, beaucoup plus classe

Si vous êtes comme moi un fan de jquery (même si dans le bureau ça fait débat, mon collègue étant lui plus porté sur mootools mais là pour le coup ça peut faire l’objet d’un billet en entier), on peut dégager la vilaline bordure en une seule ligne de code . Hop !
$("a").each(function(){this.onmouseup = this.blur();});

Avec les expressions css

Un peu crade, mais bon ça existe. Il paraît que ça ralentit le traitement de la css et surtout, surout, ce n’est pas très standard, mais je vous donne quand même l’astuce :
a { /* remove unwanted focus outlines from links */
noFocusLine: expression(this.onFocus=this.blur())
outline: none;
}
*:focus {
outline: none;
}
Cette méthode fonctionne pour tous les navigateurs y compris le vilain petit canard IE6, c’est d’ailleurs pour lui qu’on fait la cradissime expression css alors que le joker * vaut pour tous les autres navigateurs.

En CSS, tout simplement

Cette méthode a clairement ma préférence parce que j’aime produire du code standard et parce que cette méthode ne fonctionne pas dans IE 6 et que bien que n’étant pas libéral ni fan d’Alain Madelin je ne vois pas pourquoi j’aiderais un navigateur vieux de plus de 10 ans à se comporter comme les navigateurs de dernière génération et de toute façon c’est avec ce genre de comportement altruiste mal ciblé qu’on entend les DSI de grosses boîtes dire mais pourquoi qu’on changerait note bon vieil IE6 pour un IE7 qu’on connaît à peine ? IE6 marche tellement bien ? Pourquoi ? Hein ? Pourquoi ? alors pour les faire changer d’avis et pour faire bénéficier les internautes des dernières technologies web embarquées dans les navigateurs modernes, j’ai décidé de pénaliser sciemment IE 6 et j’utilise donc cette méthode :
*:focus {
outline: none;
}
*::-moz-focus-inner {
border: none;
}

Evidemment, si vous retirez la bordure des liens cliqués, vous vous exposez aux foudres des cadors de l’utilisabilité. Mais comme en France, on sait à peine ce que ce mot veut dire, vous ne risquez pas grand chose. Mais quand même, je vous préviens.

Edit : comme l’indiquent Shemu et Romy dans leurs commentaires, en plus d’améliorer la fonction back du navigateur, l’outline des liens sert aussi et surtout pour la navigation au clavier. Donc maintenant que vous savez comment cibler cet état, il ne vous reste plus qu’à en faire quelque chose de joli comme suggéré dans ledit commentaire.

1. La raison tenant essentiellement à ce qu’on appelle l’utilisabilité. Il peut être utile lorsqu’on fait un back sur une page d’avoir les dernier lien sur lequel on a cliqué entouré d’une bordure, même si ça fait moche, ainsi, on sait en revenant en arrière sur quel lien on avait cliqué.