:focus-visible - Sélecteur CSS

:focus-visible

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

Description rapide
Pseudo-classe ciblant 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)

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.

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)

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

1
Pseudo-classe
:focus-visible
Estimation de la prise en charge globale.

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Internet Explorer

Opéra Mobile

KaiOS Browser

Edge

Androïd Brower

Chrome pour Androïd

Firefox pour Androïd

Samsung Internet

Opéra

Safari

Safari sur IOS

Chrome

Firefox

Baidu Browser

QQ Browser

UC Browser pour Androïd

Opéra mini

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 ciblant l'élément qui est actif (celui qui est cliqué ou touché).
    :hover
    Pseudo-classe ciblant l'élément sur lequel se trouve le curseur de la souris.
    :focus
    Pseudo-classe ciblant la zone de saisie qui a le focus.
    :focus-within
    Pseudo-classe ciblant la zone de saisie qui a le focus, ainsi que le formulaire correspondant.