Une remarque ? Une suggestion ?...

Merci de participer à l'amélioration de ce site. Prenez le temps de rédiger votre remarque le plus précisément possible :

:focus-visible - Sélecteur CSS

:focus-visible

Résumé des caractéristiques du sélecteur :focus-visible

Description rapide
Pseudo-classe désignant la zone de saisie qui a le focus, mais uniquement si le navigateur matérialise ce focus (par une bordure plus épaisse par exemple).
Statut
Standard
Module W3C
Sélecteurs
Références (W3C)
Statut du document:: WD (document de travail)

Description de la pseudo-classe :focus-visible.

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.

Exemples avec :focus-visible.

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".

:focus-visible :
    Lien (balise a)
 
:focus :
    Lien (balise a)

Compatibilité des navigateurs.

Cette pseudo-classe :focus-visible est maintenant bien reconnue par les navigateurs (Firefox l'a longtemps traitée sous le nom :-moz-focusing).

1
:focus-visible
Estimation de la prise en charge en pourcentage du parc actuel.
90%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Androïd Brower

Version testée : 105 (2022)

Chrome

Version testée : 106 (2022)

Chrome pour Androïd

Version testée : 105 (2022)

Edge

Version testée : 105 (2022)

Firefox

Version testée : 105 (2022)

Firefox pour Androïd

Version testée : 104 (2022)

Internet Explorer

Version testée : 11 (2013)

Opéra

Version testée : 91 (2022)

Opéra Mobile

Version testée : 64 (2021)

Safari

Version testée : 16.0 (2022)

Safari sur IOS

Version testée : 16.0 (2022)

Samsung Internet

Version testée : 18.0 (2022)
Voir le site Caniuse.com pour plus d'informations de compatibilité.
Caniuse

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.

  • :active :

    • Pseudo classe désignant l'élément qui est actif (celui qui est cliqué ou touché).

  • :hover :

    • Pseudo-classe désignant l'élément sur lequel se trouve la souris.

  • :focus :

    • Pseudo-classe désignant la zone de saisie qui a le focus.

  • :focus-visible :

    • Pseudo-classe désignant la zone de saisie qui a le focus, mais uniquement si le navigateur matérialise ce focus (par une bordure plus épaisse par exemple).

  • :focus-within :

    • Pseudo-classe désignant la zone de saisie qui a le focus, ainsi que le formulaire correspondant.