Créer un style au survol, au focus ou selon une condition

Un réglage peut s’appliquer tout le temps ou seulement dans une situation : lorsque la souris survole un élément, lorsque le clavier le sélectionne ou lorsque l’écran atteint une certaine largeur.

La valeur de base reste le point de départ. Une condition ajoute une valeur pour la situation choisie. Les étapes ci-dessous passent par les commandes visuelles du mode Expert.

1. Distinguer écran et état

Une règle d’écran dépend de la largeur disponible. Un état dépend d’une interaction ou d’une situation de l’élément. Changer la largeur du cadre ne crée aucune règle de style.

Les intitulés rapides Mobile, Tablet et Desktop correspondent à des seuils à partir d’une largeur, et non à des appareils détectés. Une règle Tablet peut donc aussi s’appliquer sur un écran plus large.

2. Créer un réglage au survol

Sélectionnez l’élément, puis définissez sa valeur normale. Dans l’exemple, l’opacité de base est 100 %.

Survolez la ligne du réglage et ouvrez sa commande d’ajout de condition. Choisissez Hover. Une nouvelle ligne apparaît ; réglez son opacité à 50 %.

Survolez l’élément dans le rendu, puis sortez la souris. L’opacité conditionnelle doit s’appliquer pendant le survol ; la valeur de base doit revenir ensuite. Enregistrez puis comparez dans l’aperçu visiteur.

Le survol peut renforcer une information déjà disponible, mais il ne doit pas être le seul moyen d’accéder à une action sur mobile.

3. Distinguer survol et appui

Ajoutez une autre condition avec Active, puis donnez-lui une valeur différente. Dans la démonstration, l’opacité passe à 25 % pendant l’appui.

Lorsque vous relâchez sans sortir la souris, l’état Hover peut continuer à s’appliquer. Lorsque la souris quitte l’élément, la valeur de base revient. Ce sont trois situations distinctes.

4. Prévoir le focus au clavier

Pour un lien, un bouton ou un champ, ajoutez une condition Focus. Choisissez un changement qui permet de repérer clairement l’élément sélectionné, par exemple une bordure ou un contour visible.

Testez avec Tabulation, puis Majuscule + Tabulation, dans l’aperçu visiteur. Un paragraphe ordinaire ne reçoit généralement pas le focus : lui ajouter un style Focus ne le transforme pas en bouton.

Conservez un repère de focus lisible. Un changement trop discret ou une forte baisse d’opacité peut rendre l’action plus difficile à identifier ; l’opacité utilisée dans les tests sert à comparer les états, pas à recommander ce design pour tous les boutons.

5. Combiner écran et état

Cliquez sur le badge de la condition existante pour ouvrir ses réglages. Vous pouvez choisir un état et un seuil d’écran dans le même panneau, puis cliquer sur Définir le modificateur.

Par exemple, md + hover signifie : appliquer cette valeur lorsque la largeur atteint 768 px et que l’élément est survolé. Les deux conditions doivent être réunies.

Comparez deux cadres : au-dessus du seuil, le survol applique la règle ; en dessous, la valeur de base reste active si aucune autre règle ne s’applique. Choisissez les conditions disponibles dans le panneau plutôt que de saisir un sélecteur personnalisé.

Modifier ou retirer une condition ou adoucir le changement avec une transition.