🚷 🤵🏻 😽 Rendre les styles de pointage, de mise au point et d'état actif différents ⭐️ 🔈 🙇🏼

Au fil des ans, j'ai stylisé les états des éléments :hover :focus et :active même manière. Je ne me souviens pas exactement quand exactement j'ai commencé à faire ça. Mais c'est loin d'être la meilleure approche. Pourquoi, je vais essayer d'expliquer dans cet article.

Voici un exemple du code que j'ai toujours utilisé.

 .selector { &:hover, &:focus, &:active { ... } }

Lorsque j'ai commencé à prêter plus d'attention à l'accessibilité de l'interface lorsque je travaillais avec le clavier (l'état de focalisation en particulier), je suis arrivé à la conclusion que nous ne devrions pas styliser les différents états des éléments de manière égale.

Le guidage, la mise au point et l'état actif doivent être conçus différemment.

La raison est simple: ce sont des conditions différentes!

Aujourd'hui, je veux vous montrer la manière magique d'organiser les trois états sans trop d'effort.

Commençons par :hover .

Style de survol (: survoler)

:hover déclenche lorsque l'utilisateur survole un élément avec le curseur de la souris.

Habituellement, cette condition consiste à changer la couleur d' background-color de la couleur d' background-color et / ou de la color texte. Les différences ne doivent pas être évidentes, car les utilisateurs savent déjà qu'ils survolent un élément.

 button { background-color: #dedede; } button:hover { background-color: #aaa; }

Mise au point de style (: mise au point)

:focus déclenche lorsqu'un élément reçoit le focus. Ceci est réalisé de deux manières:

lors de la sélection d'un élément avec le bouton Tab
lorsque vous cliquez sur un élément avec la souris

Les éléments focaux comprennent:

Liens ( <a> )
Boutons ( <button> )
Éléments de formulaire ( <input> , <textarea> , etc.)
Éléments avec l'attribut tabindex

Quelques points importants à garder à l'esprit:

Les utilisateurs ne peuvent pas sélectionner avec le bouton Tab un élément avec l'attribut tabindex="-1" , mais peuvent cliquer dessus avec la souris. Un clic provoque un état de focus.
Sur les navigateurs Safari et Firefox Mac OS, le clic ne provoque pas la concentration sur les éléments <button>
Lorsque vous cliquez sur le lien <a>, le focus reste dessus pendant que le bouton de la souris est enfoncé. Lorsque vous relâchez le bouton, le focus est redirigé vers un autre endroit si l' id existant sur la même page est spécifié dans l'attribut href

En stylisant l'état du focus, nous nous soucions plus des utilisateurs qui travaillent avec l'interface clavier que de ceux qui utilisent la souris.

Lorsque les utilisateurs appuient sur Tab, ils ne savent pas à quel élément le focus ira, mais ils ne peuvent que deviner. C'est pourquoi nous avons besoin d'un changement d'état notable - pour attirer l'attention de l'utilisateur sur l'élément ciblé .

Dans la plupart des cas, la conception de la mise au point par défaut est correcte. Si vous voulez le styliser à votre manière , souvenez-vous de ces quatre points:

Ajout d'un trait
Créer des animations
Changer la background-color
Changement de color

Comme la modification de la background-color et color propriétés de color se fait souvent avec :hover , il est logique d'organiser l'état :focus l'aide d'un trait ou d'une animation.

Vous pouvez utiliser des combinaisons des propriétés de outline , de border et d' box-shadow pour créer des styles de focus intéressants. Comment faire, j'ai décrit dans l'article " Création d'un style de focus personnalisé ".

 button { background-color: #dedede; } button:hover { background-color: #aaa; } button:focus { outline: none; box-shadow: 0 0 0 3px lightskyblue; }

Stylisation de l'état actif (: actif)

Lorsque vous interagissez avec quelque chose dans la vraie vie, vous vous attendez à une sorte de réponse. Par exemple, lorsque vous appuyez sur un bouton, vous vous attendez à ce qu'il soit enfoncé.

Sur les sites Web, cette réponse est également utile. Vous pouvez styliser le moment de "presser le bouton" avec :active . Cet état est appelé lorsque vous interagissez avec un élément . Dans ce cas, l'interaction signifie:

Maintenir le bouton gauche de la souris sur un élément (même lorsqu'il n'est pas net)
Maintenez la barre d'espace (sur les boutons)

 button:active { background-color: #333; border-color: #333; color: #eee; }

Deux points à noter:

Maintenir un espace provoque l'état :active pour les boutons (<bouton>), mais maintenir Entrée ne signifie pas
Enter lance des liens mais ne provoque pas un état actif. La barre d'espace ne lance pas du tout de liens

Styles de lien par défaut

Les liens ont des styles d'état actifs par défaut. Lorsqu'ils sont pressés, ils deviennent rouges

Relation entre: actif et: concentré

Lorsque vous maintenez le bouton gauche de la souris sur l'élément focalisé, son état actif est appelé. Mais en même temps, l'état de mise au point est également appelé.

Lorsque vous relâchez le bouton gauche de la souris, le focus reste sur l'élément.

Cela s'applique à la plupart des éléments pouvant être mis au point, à l'exception des liens et des boutons.

Pour les liens:

Maintenir le bouton gauche de la souris enfoncé dans Firefox et Chrome provoque les états :active et :focus . Dans Safari, seul état :active (testé uniquement sur Mac OS)
Si vous relâchez le bouton de la souris,: le :focus reste sur le lien (si l'attribut href n'est pas lié à id sur la même page). Dans Safari, le focus revient à <body>

Pour les boutons:

Lorsque vous maintenez le bouton gauche de la souris: les deux états :active et :focus sont appelés uniquement dans Chrome. État :focus n'est pas appelé du tout dans Safari et Firefox (Mac). J'ai écrit sur ce comportement étrange ici .

Si vous voulez que les clics provoquent le focus pour les boutons, vous devez ajouter ce JavaScript dès que possible (pour ce qu'il faut, vous pouvez lire dans l'article, le lien vers lequel je l'ai indiqué ci-dessus).

 document.addEventListener('click', event => { if (event.target.matches('button')) { event.target.focus() } })

L'ajout de ce code modifiera le comportement du bouton comme suit:

Lorsque vous maintenez le bouton de la souris enfoncé,: :active est appelé dans tous les navigateurs,: se :focus uniquement dans Chrome
Si vous relâchez le bouton de la souris, il appelle :focus sur Safari et Firefox (Mac OS). :focus reste sur le bouton dans tous les navigateurs

Comportement des boutons dans Safari après l'ajout d'un morceau de code JS

Maintenant que vous savez tout ce dont vous avez besoin sur le survol, la mise au point et les états actifs, je veux parler du style des trois

Combinaison magique

La combinaison magique permet aux utilisateurs d'obtenir une réponse lorsqu'ils visent, se concentrent ou interagissent avec un élément. Voici le code dont vous avez besoin:

 .element:hover, .element:active { /*   / */ } .element:focus { /*   */ }

Pour les utilisateurs de souris:

Lorsque l'utilisateur survole un élément, la background-color (et / ou la color ) change. Il y a une réponse.
Lorsque l'utilisateur clique sur un élément, le contour du contour du focus s'affiche. Il y a une réponse.

Pour les utilisateurs de clavier:

Lorsque l'utilisateur sélectionne un élément avec le bouton Tab, le trait de mise au point s'affiche. Il y a une réponse.
Lorsqu'ils interagissent avec un élément, la background-color (et / ou la color ) change. Il y a une réponse.

Le meilleur des deux mondes!

Je n'ai pas testé soigneusement la combinaison magique, ce n'est qu'un argument en faveur de ce concept. Je vous serais reconnaissant de bien vouloir m'aider à le vérifier et à me faire part d'éventuels problèmes.
Si vous voulez vérifier, n'utilisez pas Codepen . L'état de focus des liens dans Codepen est très étrange. Si vous survolez un lien, le trait de mise au point est supprimé. Pourquoi? Je ne sais pas. Parfois, il me semble qu'il est préférable de vérifier de telles choses sans utiliser d'outils supplémentaires. Juste le bon vieux HTML, CSS, JS.

Pas une combinaison magique (mais peut-être encore meilleure)

Comme je l'ai mentionné ci-dessus, les clics sur les boutons ont un comportement étrange dans Safari et Firefox sur Mac OS. Si vous avez ajouté l'extrait de code JavaScript que j'ai suggéré ci-dessus, la combinaison magique fonctionne toujours. Mais pas parfait.

Voici ce qui se passe sur Safari et Firefox sur Mac OS:

Lorsque l'utilisateur maintient le bouton de la souris enfoncé, rien ne change
Lorsque les utilisateurs relâchent le bouton, l'élément reçoit le focus.

Si vous pensez que cela suffit, alors la combinaison magique fonctionne. Vous pouvez vous arrêter là.

Mais si vous pensez que ce comportement n'est pas suffisamment accessible, vous voudrez peut-être styliser les états :hover :focus et :active séparément.

 .element:hover { /*   / */ } .element:active { /*        */ } .element:focus { /*   */ }

Comportement des boutons dans Safari si les trois états ont été stylisés

C'est tout! Merci d'avoir lu et j'espère que vous avez appris quelque chose de nouveau aujourd'hui.

Rendre les styles de pointage, de mise au point et d'état actif différents