Le bouton qui ne change pas — exercice corrigé de CSS : mettre en forme le Web (école d'ingénieur) (chapitre 3)

Le bouton qui ne change pas

Cascade, spécificité et héritage · niveau 2

Énoncé


body {
  font-family: system-ui, sans-serif;
}

/* Les liens des fiches de livre */
.fiche a {
  color: #1f3a68;
}

/* Le bouton de commande */
.bouton {
  color: #222;
  background-color: #e07a1f;
}

Dans la fiche d'un livre (<article class="fiche">), le lien <a class="bouton"> reste en texte bleu nuit sur fond ocre, peu lisible. Expliquer à l'aide de la spécificité, puis proposer trois corrections sans !important ; laquelle est la meilleure ?

Corrigé

.fiche a a la spécificité $(0, 1, 1)$ , .bouton $(0, 1, 0)$ : la règle des liens de la fiche gagne la propriété color, et le fond ocre (que seule .bouton déclare) s'applique quand même. D'où le bleu nuit sur ocre, d'un contraste de 3,7:1, insuffisant (chapitre 4).

Trois corrections :

Renforcer le bouton : .fiche .bouton $(0, 2, 0)$ . Cela marche, mais le bouton ne fonctionnera pas ailleurs, et la surenchère commence.
Exclure le bouton : .fiche a:not(.bouton). La spécificité monte à $(0, 2, 1)$ , ce qui gênera la prochaine variante.
Affaiblir la règle de base : :where(.fiche) a, $(0, 0, 1)$ . C'est la meilleure : la règle de base cède devant n'importe quelle classe, et le composant .bouton reste indépendant de l'endroit où on le place.


body {
  font-family: system-ui, sans-serif;
}

/* Les liens des fiches de livre : la base, sans poids */
:where(.fiche) a {
  color: #1f3a68;
}

/* Le bouton de commande */
.bouton {
  color: #222;
  background-color: #e07a1f;
}