[resolu] Bordure bleue (blur) autour des images sur safari

Bonsoir,

J'ai un problème qui me prends la tête. Il s'agit de la fameuse bordure bleue autour des images en lien sur safari.
Ce n'est pas la première fois que j'ai affaire à ce problème et je l'élimine habituellement grâce à une classe

a img{
border: 0; 
outline: none !important
}

j'ai bien tout tenté en ciblant précisément l'image (qui se trouve dans une thickbox), mais rien à faire !!!! J'ai même introduit directement dans la page un style="border:0;" et un bon vieux onfocus="this.blur()". Mais rien à faire, la bordure bleue reste autour de mes images !!!!

Si qqn peux m'aider !?!
Merci
Modifié par nforum (27 Aug 2009 - 11:01)

Salut

Un border:none ?

Salut,

Merci pour ta réponse, mais ce n'est pas ça. J'avais déjà essayé d'utiliser un border:none.

Néanmoins, j'ai depuis trouvé la solution. Mettre un border none à la balise img ne suffit pas (ou n'est pas nécessaire). Il faut donc faire ceci :

a {
outline: none !important
}

Uniquement dans ce cas, safari supprimera l'effet de blur autour des images !

Voilà

Bon, faut arrêter de déconner les gens là.

Pour commencer, tu aurais dû préciser si ton problème concerne:
1. Une bordure affichée en toutes circonstance autour des images dans les liens.
2. Une bordure qui s'affiche sur le lien lors du focus (navigation au clavier).
3. Une bordure qui s'affiche sur le lien lors du clic.

À ma connaissance, aucun navigateur ne rajoute une bordure sur les images dans les liens (plutôt que sur le lien lui-même) lors du focus ou du clic. Les navigateurs rajoutent en général un outline (pas un border) sur les liens eux-même lors du focus et du clic,

Le premier cas se résout simplement: ça se règle avec un a img {border: none;} (pas d'exception dans tel ou tel navigateur à ma connaissance... en dehors du fait que certains n'entourent pas d'une bordure les images dans les liens).

Le deuxième cas n'est PAS un problème, c'est une fonctionnalité du navigateur qu'il FAUT conserver car elle rend possible la navigation au clavier. Supprimer cette fonctionnalité, c'est diminuer l'accessibilité du site pour un gain nul.

En vertu de quoi, la solution du

a {outline: none !important;}

peut être adéquatement décrite ainsi: c'est une bêtise à éviter, merci bien.

Le troisième cas peut être considéré comme un léger problème esthétique. On pourra tenter de le corriger, du moment que la solution retenue ne supprime pas la fonctionnalité évoquée en (2). À ma connaissance, la solution correcte est la suivante:

a:active {outline: none;}

(L'utilisation d'un !important ne devrait pas être nécessaire.)

a écrit :

Le deuxième cas n'est PAS un problème, c'est une fonctionnalité du navigateur qu'il FAUT conserver car elle rend possible la navigation au clavier. Supprimer cette fonctionnalité, c'est diminuer l'accessibilité du site pour un gain nul.

Merci pour les précisions.
Néanmoins, je constate souvent que l'apparence d'un site l'emporte sur la fonctionnalité. Le site en question concerne un photographe et il était impossible de laisser le cadre bleue autour des photographies. Les raisons sont purement esthétiques. Cependant, je constate que la fonctionnalité clavier fonctionne toujours sur safari, malgré la suppression du cadre bleu avec

a {
outline: none !important;
}

nforum a écrit :
Le site en question concerne un photographe et il était impossible de laisser le cadre bleue autour des photographies.

Là encore: cadre bleu en permanence, au survol, au focus, au clic?
Il aurait été bon de préciser... et de donner l'URL, pour être plus efficace encore.

nforum a écrit :
Cependant, je constate que la fonctionnalité clavier fonctionne toujours sur safari, malgré la suppression du cadre bleu avec

a {
outline: none !important;
}

Dans mes tests ce n'est pas le cas.

Le cadre bleu apparaissait en permanence autour d'une image cliquable.

Dans ton exemple, je ne vois aucun cadre bleu sous safari

nforum a écrit :
Le cadre bleu apparaissait en permanence autour d'une image cliquable.

Ce n'est à priori pas un problème lié à un outline. Ou alors je demande à voir...

nforum a écrit :
Dans ton exemple, je ne vois aucun cadre bleu sous safari

C'est une page de test pour le comportement lors de la navigation au clavier.
Dans le cas de Safari sous OS X, il faut avoir activé la navigation au clavier sur tous les éléments actifs (et pas uniquement les champs de formulaire). Je ne sais plus exactement pour Safari sous Windows.
Modifié par Florent V. (27 Aug 2009 - 16:44)

<hs> Merci pour ces essais, je ne connaissais pas cette règle css et je m'en vais de ce pas l'utiliser pour cacher cette selection lors d'un clic souris que je trouve désagréable, mais par contre renforcer l'effet au clavier pour y voir plus clair ! </hs>