:focus-visible - Sélecteur CSS
Résumé des caractéristiques du sélecteur :focus-visible
Pseudo-classe :focus-visible - Description
La pseudo-classe :focus-visible est un sélecteur qui cible la zone de saisie active lorsque le navigateur décide
qu'elle doit être mise en évidence.
Cette décision prend en compte le type de zone de saisie (zone de texte, bouton, etc.) et la méthode utilisée pour activer la zone,
touche de tabulation ou souris.
:focus-visible est très comparable à la pseudo-classe :focus, mais cette dernière cible l'élément actif quelque soit
son type et le moyen utilisé pour l'activer.
Pseudo-classe :focus-visible - Exemples d'utilisation.
L'exemple ci-dessous met en évidence les différences de comportement entre :focus-visible et :focus.
Activez les zones de saisie ou les boutons avec la souris, puis avec la touche de tabulation pour bien constater les différences,
en particulier sur le bouton "Demo" et sur le lien.
Pseudo-classe :focus-visible - Compatibilité des navigateur.
Cette pseudo-classe :focus-visible est maintenant bien reconnue par les navigateurs
(Firefox l'a longtemps traitée sous le nom :-moz-focusing).
:focus-visible qui cible l'élément que le navigateur à mis en évidence comme ayant le focus.:focus-visibleNavigateurs sur ordinateurs :
Navigateurs sur mobiles :
Navigateurs obsolètes ou marginaux :
Internet Explorer
UC Browser pour Androïd
Opéra Mobile
QQ Browser
Baidu Browser
Safari
Samsung Internet
Opéra
Safari sur IOS
Firefox
Firefox pour Androïd
Chrome
Edge
Androïd Brower
Chrome pour Androïd
KaiOS Browser
Opéra mini
Pseudo-classe :focus-visible - Historique.
-
Sélecteurs - Niveau 4
Concernant:focus-visible. Introduction de la pseudo-classe:focus-visibledans ce niveau 4 de la spécification.
29 Septembre 2011Document de travail.
Voir aussi...
Reportez-vous aux explications concernant les pseudo-classes ci-dessous. elles ont toutes en commun de sélectionner des éléments en fonction des actions de l'utilisateur : déplacement de la souris, clic, etc.