:focus :focus-within :focus-visible

portrait de l'auteur

Écrit par Vincent Delmotte

Le 12 avril 2024

Dans cet article, vous découvrirez les pseudo-classes css :focus, :focus-visible et :focus-within. Ces pseudo-classes permettent de donner l’état d’un élément sur lequel elles se trouvent. Découvrez comment les utiliser et les différencier.

: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" />
Input basique Input dans l'état focus avec un style appliqué

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.

Formulaire basique Formulaire dans l'état 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)
Bouton focus par tab avec le style de la pseudo classe :focusBouton focus par clique avec le style de la pseudo classe :focus
Bouton focus par tab avec le style de la pseudo classe :focus-visibleLe style focus ne s'applique pas au bouton focus par clique car il possèdent la classe :focus-visible

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.

Sources

https://developer.mozilla.org/en-US/docs/Web/CSS/:focus

https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-within

https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-visible

https://caniuse.com/

← Voir tous les articles