Le saviez-vous ? :focus :focus-within :focus-visible
Tags: css, html
Published: 2024-04-12 19:07:17

**: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.

&nbsp;
## :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

&nbsp;
### 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.

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

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

![input](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ns2kqbbm0z90s7dtkw47.png)

![focused input that apply style](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rv7tae16dvg9x4u9as5y.png)

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 :

```css
.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](https://caniuse.com/mdn-css_selectors_focus).

&nbsp;
## :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.

&nbsp;
### Cas d’usage

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


![form with an input](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dovkvocr2phg26g755o7.png)
![form with an input focused that apply style on both element](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pk9kstchhd0juervop2d.png)

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

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

&nbsp;
### 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](https://caniuse.com/css-focus-within).

&nbsp;
## :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.

&nbsp;
### 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.

&nbsp;

| Focus Clavier (tab) | Focus Souris (clique) |  
|-------|-------|
| ![bouton focus par tab avec le style de la pseudo classe :focus](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hfd6y0dek6luq42sh597.png) | ![bouton focus par clique avec le style de la pseudo classe :focus](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hfd6y0dek6luq42sh597.png) | 
| ![bouton focus par tab avec le style de la pseudo classe :focus-visible](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/inp6gjfjh3lezbcsfuk3.png)   | ![le style focus ne s'applique pas au bouton focus par clique car il possèdent la classe :focus-visible](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4imi8w4rypi7yx20krjn.png) |

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.

&nbsp;
### 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](https://caniuse.com/mdn-css_selectors_focus-visible).

&nbsp;
## 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/