Lab sélecteurs, cascade et couleurs
Livre le système visuel complet sans élargir les sélecteurs ni perdre focus et responsive.
Objectifs de la leçon
- Implémenter Lab sélecteurs et couleurs sans perdre le scenario PulsaConf.
- Relier cascade au risque : un sélecteur trop large ou une couleur non justifiée se propage partout.
- Prouver que l'inspecteur montre le bon sélecteur, la couleur active et un focus encore visible.
Carte de base
Conserve les acquis de CSS 00 pour garder une base comparable avant chaque nouvelle décision visuelle.
Ajoute les règles sans supprimer la media query, puis contrôle la largeur sur mobile et sur desktop.
Variantes
Sépare la carte héro et la carte atténuée avec des classes de variante explicites qui complètent la règle de base.
Évite les sélecteurs globaux afin qu'une correction locale ne modifie ni la navigation ni les autres composants.
États
Le lien reste souligné et son focus visible pour que le changement d'état ne dépende jamais uniquement de la couleur.
Inspecte chaque déclaration active, puis navigue au clavier pour confirmer la cascade dans le rendu réel.
Vocabulaire lié
- portée — Périmètre du sélecteur.
- variante — Modification explicite du composant.
- état — Situation interactive ou éditoriale.
Validation
- La base reste intacte.
- Les variantes sont limitées.
- Le focus reste visible.