Le saviez-vous ? :focus :focus-within :focus-visible

:focus, :focus-visible ou encore :focus-within. Si vous n’avez jamais pris le temps d’aller lire MDN sur le sujet, voici un petit résumé qui vous expliquera les bases !

Tout d’abord, :focus, :focus-visible et :focus-within sont des pseudo-classes css. Une pseudo-classe css permet de donner l’état d’un élément sur lequel elle se trouve. Détaillons le rôle de chacune d’entre elles.

:focus

Commençons par la première arrivé dans nos navigateurs, j’ai nommé :focus.

:focus permet simplement d’appliquer du style quand un élément est dans l’état focus.

Un élément peut être dans l’état focus via :

navigation clavier : Tab
clique souris
entrée clavier

Cas d’usage

:focus applique un style lorsqu’un élément est dans l’état focus. Par défaut, une bordure épaisse est appliquée sur l’élément focus, mais il est possible d’ajouter d’autre style.

.element:focus {
  background: yellow;
  color: red;
}

<input class="element" value="Rouge si focus" />

Dans cet exemple, on voit que lorsque l’input element est focus, le navigateur applique le style à ce dernier.

Il est possible de supprimer cette bordure en appliquant la classe suivante :

.element:focus {
    outline: none
}

Par soucis d’accessibilité, il est fortement déconseillé de supprimer complètement outline. Il est préférable de le remplacer avec un autre style respectant les règles d’accessibilité (en particulier le contraste de 3:1).

Compatibilité

:focus est supportée depuis 2003 par certains navigateurs. Aujourd’hui, :focus est supportée sur tous les navigateurs web. Liste des navigateurs supportant :focus.

:focus-within

La deuxième pseudo classe a avoir fait apparition dans nos navigateur est :focus-within.

:focus-within permet d’appliquer du style sur un élément qui est focus ou dont l’un des enfants est focus.

Cas d’usage

Il est possible de mettre en évidence un formulaire lorsque l’un de ses inputs est focus.

form:focus-within {
  border: 2px solid #0085ca;
}

<form>
    <label>
        Full Name: <input name="firstName" type="text" />
    </label>
</form>

Compatibilité

:focus-within est supportée depuis 2017 par certains navigateurs. Aujourd’hui, :focus-within est supportée par tous les navigateurs web. Liste des navigateurs supportant :focus-within.

:focus-visible

La dernière des trois a avoir fait son apparition dans nos navigateurs est :focus-visible.

:focus-visible est ajoutée dans le but de simplifier la vie des développeurs. Cette pseudo-classe permet d’appliquer le style focus en fonction de règles heuristiques du User Agent.

Pour simplifier, le style focus n’est plus appliqué par défaut mais plutôt lorsqu’il est pertinent pour l’utilisateur.

Cas d’usage

L’utilisation de :focus-visible permet de faire une différence visuelle entre les focus par tab et les focus par clique.

Focus Clavier (tab)	Focus Souris (clique)

Ici on voit la différence entre :focus et :focus-visible. Le comportement de focus par clavier est identique.

En revanche, on peut voir que :focus applique le style lorsqu’on clique à la souris sur un bouton alors que :focus-visible ne l’applique pas.

Compatibilité

:focus-visible est supportée depuis 2020 dans certains navigateurs. Aujourd’hui :focus-visible est supportée par tous les navigateurs web. Liste des navigateurs supportant :focus-visible.