[CSS] Enlever les pointillés des liens

Publié le mardi 29 juillet 2008, 14:55 - modifié le 30/03/09 - Xhtml / CSS - Lien permanent

Article
Commentaires (19)
Fichiers attachés (0)

Dans l'optimisation d'un site web ou d'un blog, il faut parfois penser aux petits détails qui font la différence entre les beaux sites et les très beaux. Il en est un qui n'est pas très connu mais qui vaut le détour.

Vous avez surement dû remarquer que quand vous cliquez sur un lien, au moment où vous le cliquez, il s'entoure d'une légère bordure en pointillé (cf l'exemple en image ci dessous avec le menu de ce blog)

Il s'agit de la propriété CSS "Outline" qui est très proche de la propriété border mais qui a l'avantage de ne pas faire partie du fameux "box-model" Pour supprimer ce disgracieux outline au clic sur un lien, il vous suffit simplement d'ajouter l'écriture suivante dans votre fichier CSS

a {   outline: none; }

et voilà le résultat, cf image ci-dessous

Pratique et classe, non ?

Auteur: Guillaume BIZET

Restez au courant de l'actualité et abonnez-vous au Flux RSS du blog ou du Flux RSS de cette catégorie

Tweeter

Skwi · 29 juillet 2008, 15:09

Classe ! Très classe !
Merci pour l'astuce

Bastien · 29 juillet 2008, 15:16

En effet, pratique et classe
Maintenant, pas dit que ça soit à déconseiller partout, c'est quand même bien pratique d'avoir une info visuelle comme quoi on a bien cliqué sur quelque chose

DuMe · 29 juillet 2008, 15:19

Non, c'est de l'ergonomie, voir de l'accessibilité que de les laisser, ils servent lors de l'appui sur la touche tab...
Il ne faut surtout pas faire cela!!!

ShadowKris · 29 juillet 2008, 15:27

J'avais blogué la même chose il y a 2 ans, puis finalement :
http://blog.shadowkris.com/2008-02-...

Luc · 29 juillet 2008, 16:05

@Dume : il y'a d'autre moyen bcp plus visuel d'ajouter une couche d'accessibilité sur les liens lors de la navigation au clavier.

notamment via l'utilisation des pseudo class :focus et :active

@Guillaume : Merci bien, je connaissais pas encore cela...

le blogueur masqué · 29 juillet 2008, 17:16

Cool depuis le temps que je cherche cette astuce 8-| Merci bien

BigVicente · 29 juillet 2008, 17:17

Moi j'aime bien être sur d'avoir cliqué au bon endroit quand je clique quelque part. Avec ca c'était simple, si on le désactive pour tout et que chacun y va de sa sauce pour combler le manque (en oubliant une partie des éléments cliquables, ce qui risque d'arriver) je pense qu'on perd en accessibilité.

Les standards c'est quand même pratique !

(ceci dit dans la catégorie faites ce que je dis et pas ce que je fais, j'ai parfois tendance à prendre quelques libertés sur les liens textuels... 8-D)

Necro · 29 juillet 2008, 17:21

C'est dommage de supprimer le peu de cohérence ergonomique que peuvent avoir les navigateurs entre eux, et surtout les utilisateurs entre eux...

Les utilisateurs "lambda" ne remarque pas ce détail et s'en servent pourtant tous les jours... pourquoi leurs enlever une habitude/un confort au détriment d'un design ?

Un utilisateurs "lambda" est tout aussi perdu face à des boutons de formulaires non conforme/non intégrés à son OS.

Jean-Sébastien Mansart · 29 juillet 2008, 17:28

Hum...
Je trouve pas ça génant, ni moche.

Au moins on sait quand on a cliqué sur le lien

Pour l'accessibilité, je suis pas sur que ça intervienne, mais bon, ça fait longtemps que j'ai pas regardé la liste des recommandations...

netwizz · 30 juillet 2008, 02:02

Sympa l'astuce, je ne connaissais pas.
C'est sûr que ce n'est pas appliquer systématiquement, mais sur certains liens graphiques c'est tip top

Fred · 30 juillet 2008, 07:22

Bah moi je l'ai appliqué sur mon blog, on verra bien si des internautes s'en plaignent. Ce qui est sûr, c'est que c'est beaucoup plus "propre" comme ça

Guillaume · 30 juillet 2008, 08:55

Salut à tous merci pour les commentaires et le débat intéressant. Pour ce qui est de l'ergonomie etc ... je vais demander à des blogs spécialistes de l'ergonomie et de l'accessibilité ce qu'ils en pensent et je vous tiendrais au courant

Jean-Marie · 31 juillet 2008, 07:57

Ben moi en fait j'ai jamais eu ses pointilés, c'est la premièere fois que je vois ça, à mon avis cela doit provenir du navigateur non ? ...

PtitLoop · 06 août 2008, 23:17

mince, si j'avais su !
ca fait des années que j'utilisais le script suivant, 10x plus long, à placer juste avant la balise </body>

<script language="javascript">
function blur() {this.blur();}
if (document.getElementsByTagName)
{
ToutLien = document.getElementsByTagName("A");
for (i=0;i<ToutLien.length;i++)

  ToutLien[i].onfocus = blur;
}
</script>

(en plus, ne marche pas si la balise </body> est dans une page "footer" externe)

stefff · 22 août 2008, 16:01

Bonjour,

Le contour en pointillé, est très utile pour la navigation au clavier et sert également pour l'accessibilité du site pour les non-voyants.
A la place de le supprimer on peut très bien modifier son aspect par exemple avec ceci:

a { outline-width: medium; }

serge · 06 mai 2009, 15:02

bonjour,

j'ai appliqué cette méthode , elle fonctionne mais...
comme je ne voulais pas que la navigation par tabulation ne puisse se faire, j'ai essayé d'appliquer à une seule balise <a> située dans le div header

j'ai donc fait

#header a {outline: none; }

et là ça ne fonctionne pas

kkun a une idée ? je retourne cela dans tous les sens et ne trouve pas....

merci d'avance

serge · 14 mai 2009, 10:32

toujours pas trouvé,
help me !!
lol

Guillaume · 14 mai 2009, 10:38

@serge : cela me semble être bon mais donne nous une url qu'on puisse aller voir ce qui peux clocher

obiwoobi · 12 novembre 2010, 22:25

merci

Le blog de Guillaume Bizet