Indicateur de focus pour Firefox

Posted Tuesday, May 23, 2006

Filed under: , , , ,

Dans un récent article, (new focus indicator) Mark Pilgrim a proposé un script greeasemonkey permettant d'afficher un indicateur de focus plus flagrant (et plus bleu) dans Firefox. Voici comment l'implémenter sans passer par greasemonkey mais par userContent.css une fois encore.

Localisez le fichier userContent-Example.css utilisé par votre profil Firefox et créez s'il n'existe pas déjà un nouveau fichier nommé userContent.css. Dans ce fichier vous allez maintenant ajouter les règles suivantes:

*:focus { -moz-outline: 2px solid #10bae0 ! important; -moz-outline-offset: 1px ! important; -moz-outline-radius: 5px ! important; }
button:focus::-moz-focus-inner { border-color: transparent ! important; }
button::-moz-focus-inner,
input[type="reset"]::-moz-focus-inner,
input[type="button"]::-moz-focus-inner,
input[type="submit"]::-moz-focus-inner,
input[type="file"] > input[type="button"]::-moz-focus-inner { border: 1px dotted transparent ! important; }
textarea:focus, button:focus, select:focus, input:focus { -moz-outline-offset: -1px ! important; }
input[type="radio"]:focus {-moz-outline-radius: 12px; -moz-outline-offset: 0px ! important; }
a:focus { -moz-outline-offset: 0px ! important; }

Ces règles un peu barbares (qui mélangent css3 et propriétés spécifiques à Firefox) définissent un indicateur de focus bleu de 2 pixels de large et l'appliquent a à peu près tout ce qui peut recevoir le focus.
La discussion technique se trouve dans bugzilla.

Comments disabled because of spammers.

No comments yet

Technorati Profile