Vous êtes sur Barbablog et tu kiffes jeune. Cherche sur ce blog...

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é.

13 réponses à “L’astuce du jour : comment supprimer cette horrible bordure autour des liens cliqués”

  1. Il me parait plus simple de trouver une bonne raison de leur faire admettre de laisser le cadre. On en a bien trouvé une pour leur faire renoncer au Comic Sans. =)

  2. Gabriel Jorby dit :

    Retirez la bordure des liens cliqués peut vous exposer aux foudres des cadors de l’utilisabilité. http://bit.ly/Ud6Hr #fb

  3. aSeed dit :

    Je regrette juste de ne pas l’avoir découvert avant… 🙂

  4. oj dit :

    cool, mais tu pourrais qd meme le mettre en pratique sur ton blog 🙂

  5. Askalab dit :

    j’utilise déjà cette astuce… trouvée en testant un joli template et en remarquant ce « outline » que je ne connaissais pas (quoi, y’a des trucs cachés en CSS ???? 😉 ).

    Et je l’ai vite utilisé… pourquoi ? Pour faire joli !

    Et si je veux mettre en évidence les liens déjà visités, il y a le « a:visited » pour mettre en forme comme on a envie 🙂

  6. Canardo dit :

    « ce n’est pas très standard » : un standard, par définition, c’est précis. Il n’y a pas de « pas très standard », juste du « standard » ou du « pas standard ». En l’occurrence, ça l’est pas 😉

  7. Romy dit :

    Naaaaan ! Faut pas faire ça ! Sur la plupart des sites, c’est la seule façon de repérer le lien pointé, lorsqu’on navigue au clavier ! Comment ça ? Vous ne surfez jamais au clavier ??

    Ça me tue ces clients qui veulent pénaliser ceusses qui naviguent pas comme eux, juste parce que ça leur fait… moche ! Ça fait un peu « rangez-moi cet handicapé en fauteuil roulant dans un placard paske ça me gâche la vue »…

    La bonne réponse c’est d’expliquer que c’est très utile pour naviguer au clavier et d’en prévoir le relookage dans la charte graphique, puis de styler les états :focus, :hover et :active.

  8. Shemu dit :

    Effectivement, il ne faut pas supprimer les outline sur les liens sinon pour les personnes qui naviguent au clavier, il est impossible de naviguer et de se repérer sur une page.
    Au contraire, laissons les outline et rendons les beaux en les stylant en CSS !

  9. Grégoire dit :

    @Shemu @Romy >> D’accord avec vous, dans la plupart des cas, il ne faut pas « effacer » l’état :focus des liens. Seulement, il arrive d’avoir à travailler sur certaines interfaces « flash-like » gavées de javascript destinées à un public restreint de personnes identifiées dont on sait qu’elles ne surfent pas au clavier. Dans ce genre de cas (intranet ou site « privé ») on peut se permettre de prendre des libertés avec l’accessibilité. Dans les autres cas évidemment, c’est plus gênant.

  10. an.archi dit :

    Quand tu mentionnes l’intranet comme un environnement connu, je ne peux m’empêcher de me dire que ça va engendrer une démarche discriminatoire envers de nouveaux employés/utilisateurs qui eux ne pourront pas accéder à cette fonction…

    Désolé. 😉

    • Grégoire dit :

      Au vu des réactions, on touche ici au problème épineux du principe de réalité.

      Dans l’absolu, on voudrait pouvoir faire des sites accessibles, avec des comportements javascript utiles, le tout réalisé selon le principe de la dégradation gracieuse… Mais parfois, par manque de temps ou de budget, on ne peut pas arriver à ce niveau de qualité. Je déteste avoir à rogner sur la qualité et l’accessibilité mais ce sont malheureusement des sujets qui ne parlent pas aux clients (la plupart en tout cas) et il est parfois difficile de justifier des jours de travail en plus « juste » pour l’accessibilité.

      Cependant, en travaillant avec certaines règles (séparation de la structure, de la présentation et de l’interactivité, css /html / javascript) on arrive dans 90% à réaliser un site accessible. Reste les 10% de cas épineux.

  11. Canardo dit :

    Il y a « accessibilité » et « accessibilité ». Celle qui est complexe, relativement chronophage, et qui ne peut être mise en place qu’en vendant des jours supplémentaires, et celle qui consiste en la mise en œuvre de quelques règles simples de bonnes pratiques et de bon sens. Le fait de ne pas supprimer la mise en avant sur un « :focus » fait partie de la seconde catégorie : ça ne prend pas longtemps, et ce sera toujours ça de gagner pour la personne qui navigue au clavier.

  12. Shini dit :

    Vous me faites rire…

    Mois je dis, chacun code comme il le sent… navigation au clavier, voila un truc qui me fait rire depuis qu’on en entends parler… Zavez deja vu un handicape naviguer au clavier? Non? bha serieux, moi oui, beaucoup meme… Et ils preferent la souris, nos amis les handicapes…
    Alors arretez avec vos conneries de « oh, pauvres handicapes qui savent pu naviguer au clavier », PARCEQU’ILS UTILISENT PLUS FACILEMENT UNE SOURIS QU’UN CLAVIER !!!

    Merci pour l’astuce, ca sera suuuper mega utile pour les webapp 🙂

Laisser un commentaire