Bonjour,
supprimer l'outline au :focus est une très mauvaise pratique : pour les utilisateurs et utilisatrices du clavier, cela ne leur permet plus de savoir où ils en sont dans leur navigation à travers les liens et éléments de formulaire de la page. Plus d'infos sont disponibles dans la
fiche Prise de focus d'un des guides du RGAA 3.
Perso je m'en sers lorsque dans une page je clique sur un lien, commence à lire puis revient en arrière : l'outline me permet de savoir où j'en étais de ma lecture dans la 1ère page (il a pu se passer 3s ou 10 minutes le temps de lire…). Sans outline, ça me fatigue de devoir me rappeler où j'en étais. Enfin pour celleux qui ont besoin du clavier, c'est pas juste du confort comme dans mon cas, c'est indispensable.
Je te propose plutôt de revenir au style par défaut du :focus.
Sur Firefox c'est
:focus { outline: 1px dotted #808080; }
, sur Chrome c'est un gradient bleu/orange de plusieurs px de large mais déjà le pointillé ça sera un moindre mal…
Tu peux essayer de remplacer :focus par :active aussi : garder le style pour :focus (concerne la navigation au clavier) et
:active { outline: none; }
qui se déclenche au moment du clic.
La dernière option c'est :focus-within qui est une bizarrerie CSS bien récente
https://developer.mozilla.org/fr/docs/Web/CSS/:focus-within#R%C3%A9sultat (styler un parent quand un de ses enfants a le focus… Styler un parent c'est à peu près jamais possible en CSS et là oui
)
