Skip to content

Latest commit

 

History

History
65 lines (47 loc) · 4.28 KB

07-state.md

File metadata and controls

65 lines (47 loc) · 4.28 KB
Raw
layout title section permalink description
chapter
État
Core
/chapters/state/
Découvrez comment fournir différent styles à vos modules et composants selon leur état, comme visible, caché et en train de charger.

Assez souvent, et surtout avec des interfaces utilisateurs plus riches, du style a besoin d'être appliqué quand un élément change d'état. Par exemple, nous pouvons avoir différents style quand un module (ou un composant) est :

  • visible ou caché (visible, hidden 🇬🇧)
  • actif ou inactif (active, inactive 🇬🇧)
  • désactivé ou activé (disabled, enabled 🇬🇧)
  • en train de charger ou chargé (loading, loaded 🇬🇧)
  • a des produits ou non (hasProducts, hasNoProducts 🇬🇧)
  • est rempli ou est vide (isFull, isEmpty 🇬🇧)

Pour représenter l'état, nous avons besoin de classes additionnelles qui doivent être ajoutées à l'élément du module (ou du composant). Par exemple, si notre module panier a besoin d'un arrière-plan gris quand il est vide, notre HTML doit ressembler à ceci :

   <div class="basket basket-isEmpty">

Et notre CSS :

	.basket-isEmpty {
      background-color: #eee;
	}

Le nom de la classe est préfixé avec le module (ou composante) car bien que certains états peuvent être communs entre plusieurs éléments, leurs styles peuvent être totalement différents. Par exemple, un panier vide a un arrière-plan vide, tandis qu'une barre de recherchervide a une image positionnée en absolute.

Et pour la réutilisation des états ? ♻️

Parfois, on peut avoir besoin de réutiliser un état dans plusieurs modules ou composants. Par exemple, activer/désactiver la visibilité d'un élément. Nous aborderons ce sujet plus en détail dans le chapitre consacré au Javascript.

Et pour les attributs ARIA ? 👀

Tous les états visuels peuvent être représentés par des attributs ARIA (:uk:). Par exemple, il n'y a pas d'attributs pour représenter l'état hasProducts. Par conséquent, nous devrions les utiliser seulement lorsque c'est nécessaire en plus des classes.

De plus, utiliser un sélecteur d'attribut (plutôt qu'un classe) est moins supporté (:uk:). Bien que les développeurs peuvent considérer ces navigateurs comme vieux ou non sécurisé, nous devrions éviter les techniques qui excluent certains utilisateurs.

Et pour le chaînage de classe ? 🔗

On peut utiliser un sélecteur chaîné pour l'état, par exemple .module.isDisabled. Le problème, c'est que cette approche est moins supportée par les navigateurs. Il faut éviter les patterns qui excluent les utilisateurs, à moins qu'il y ait des raisons convaincantes de les utiliser.

Derniers mots 🏁

Si le style d'un élément a besoin d'être modifié selon son état, nous devons ajouter des classes supplémentaires pour appliquer les différences. Quand cela est nécessaire, il faut utiliser les attributs ARIA pour les technologies d'assistance, mais pas pour le style. De cette manière, on construit une approche consistante et inclusive pour créer du style.