Page 3 sur 4Précédent 1, 2, 3, 4 Suivant[RESOLU] FIREFOX de vilains contours autour des images

[Haikai]

[Autocensuré]

[joshua]

Le pointillé sert a visualiser la zone active du bouton, et aussi le visualiser sur "quel" bouton l'on clique "quand" on clique, pour justement en cas d'erreur, ne pas relacher la souris, et pouvoir annuler...

Comme précisé par yosh, avec la touche tab, tu affiche les cases "cliquables", et tu passe de l'une a l'autre en réappuyant sur tab, tu les visualises (bien pratique quand meme pour QQ qui n'as pas de souris, un andicapé par exemple...) une par une, et un appuis sur "Entrée" te permet de simuler le clic sur la case.

Si tu est "rapide" avec ta souris, ce pointilé ne s'afficheras que le temps de ton clic...

Dans beaucoup de cas cette "Fonctionalité" est interressante... la qualifier de "Bug" est vraiment un non sens......

[Jean_R]

POUR SYNTHÉTISER

Firefox >> Cadres affichés avec le clavier ET la souris.
Internet Explorer >> Cadres affichés uniquement lors de la navigation par clavier.

Dans le cadre de sites graphiques, l'affichage de ces cadres peuvent être une gène (comme une mouche sur un écran de télévision), qui plus est une approche ludique de l'exploration est entravé (lien à découvrir sur l'oiseau perché dans un arbre etc...).

Je ne cherche pas à discutailler sur la nature de cette fonction, juste comment contourner cet affichage pour mon utilisation toute personnelle qui n'a rien de révolutionnaire. Tant que je n'aurais pas trouvé le moyen de ne pas permettre l'affichage de ces cadres avec la souris sur Firefox je considérerai que le choix des développeurs d'IE est plus judicieux pour ce type de création.
[hr]

Voilà pourquoi je trouve la manie actuelle de privilégier la forme aux dépends du fond particulièrement pernicieuse. Qu'est-ce que ça peut bien faire qu'il y ait des pointillés ... Franchement ...

Pernicieuse ? Qui te parle de "privilégier", j'observe une approche où la forme appui/sert le fond. Merci de ne pas juger trop rapidement un travail que tu ne connais pas.

[Jean_R]

J'ai trouvé le moyen de désactiver ces satannées bordures :

* Taper about:config dans la barre d'adresse du navigateur.
* Chercher la valeur browser.display.focus_ring_width.
* Double-cliquez dessus et changer la valeur de 1 à 0.

la source >> ici

Cela m'enlève déjà une épine du pied, mais le plus fort ce serait de pouvoir désactiver cette fonction que sur certaines pages.
Bâ c'est déja pas mal :P

[EDIT] Si j'avais des yeux j'aurais pu lire le message du 30 mai de DAMJ qui me donnait cette solution. Toutes mes confuses et mes remerciement à ce dernier.

[damj]

ya pas de quoi
Mais on est bien d'accord que cette solution n'est valable qu'en local, là où la modif du focus_ring a été faite...
Pour un site web ça n'est donc d'aucune utilité, sauf dans le cas d'une utilisation de type kiosque où tu peux configurer FF à ton goût...

Je viens de trouver une bonne illustration de ce "défaut" sur la page même où je suis en écrivant ces lignes:
Quand je clique sur un des smileys pendant la rédaction de ce message, ce smiley reste encadré tant que je ne clique pas ailleurs dans la page (ou TAB). Dans ce cas précis, ce n'est pas gênant, mais je conçois bien que dans un site graphique ça puisse l'être vraiment, en particulier dans le cas de clics sans changements de page où la zone cliquée reste éventuellement encadrée pendant longtemps.

[Jean_R]

En attendant ceci peut être intéressant (avec NVU, le top )

Pour que les images n'aient pas de bordures lorsqu'elles servent de liens. Créez une règle de style,qui supprime les bordures des images :

img { border-style: none;border-width: 0px; }

Mais comme les images sont des liens actifs lors du survol du curseur, leurs fonds changent de couleur. Pour que cela soit plus discret, nous allons lui appliquer un fond blanc.

a:hover img {background:rgb(255, 255, 255);}

Reste à se mettre au CSS

[damj]

Non, ça n'aura aucun effet sur les bordures dont il était question.
désolé...

[RilaX]

Pour enlever ces fameux pointillés, en CSS, le plus simple et peut etre le plus violent :

Code: Tout sélectionner

* {
   outline:none;
}


Ou alors, pour etre moins violent :

Code: Tout sélectionner

a {
   outline:none;
}
a:active {
   outline:none;
}

Sachant que c'est quand meme assez déconseillé pour l'accessibilité, mais comme tu semble grand et responsable ... tu fait ton choix

[damj]

Faut voir que la propriété CSS "outline" est relativement peu implémentée (à partir de FF1.5 Opera7 et pas IE d'après ce que j'ai lu)...

Sinon, il y a peut-être une solution acceptable pour toi et qui ne tue pas la divine accessibilité.
Tu ajoutes ceci en début de code

Code: Tout sélectionner

<body onclick="document.getElementById('focus').focus()">
<a href="#" id="focus" />
...
la suite de ton code...

Les cadres apparaissent quand même le temps du clic, mais ils disparaissent aussitot le bouton relaché (sauf en cas de glissement de la souris)
Ce qui me paraît acceptable car ce qui me gène le plus ce sont les cadres "persistant", par exemple quand un lien est interne à la page.

Si tu veux une solution qui supprime totalement les cadres (mais qui tue l'accessibilité) c'est faisable avec le même genre de bidouille que ci-dessus.
Quelque chose du genre :

Code: Tout sélectionner

<body onload="document.getElementById('focus1').focus()" >
<a href="#" id="focus1"  onblur="document.getElementById('focus2').focus()" />
<a href="#" id="focus2"  onblur="document.getElementById('focus1').focus()" />
...

à l'air de marcher... mais je suis pas tout-à-fait sûr de saisir pourquoi...

[Jean_R]

@ Rilax
Ô joie, le lien que tu m'as donné répond parfaitement à mes interrogations tant techniques que conceptuelles ... et bien plus encore. Merci beaucoup, je me dépêche d'éditer le titre du post >> [résolu].

Trop d'information tue l'information, c'est bien connu, et il est d'autant plus difficile de trouver ce que l'on cherche quand on ne sait pas exactement ce que l'on cherche. L'esprit communautaire montre toute sa force dans ce genre de situation.