Une variable invalide — exercice corrigé de CSS : mettre en forme le Web (école d'ingénieur) (chapitre 10)

Une variable invalide

Variables, transitions, animations et projet · niveau 2

Énoncé


:root {
  --taille: rouge;
}

body {
  font-size: 20px;
}

.chapeau {
  color: var(--couleur-chapeau, #1f3a68);
  font-size: var(--taille, 2rem);
}

Le chapeau (un paragraphe dans <main>) devait mesurer 2rem. Quelle est sa couleur, et quelle est sa taille de police ? Expliquer pourquoi la valeur de repli sert pour l'une et pas pour l'autre (page code/ch10/erreurs/variable-invalide.html).

Corrigé

Couleur : --couleur-chapeau n'est déclarée nulle part ; var() utilise donc la valeur de repli, #1f3a68.
Taille : --taille existe, avec la valeur rouge. Le repli n'est pas utilisé : il ne sert que si la variable est absente. Le navigateur substitue rouge dans font-size, ce qui n'est pas une taille : la déclaration est invalide au moment du calcul. La propriété reprend alors sa valeur héritée : 20 pixels, celle du corps.

Chromium calcule rgb(31, 58, 104) et 20px. Notez que la déclaration n'est pas barrée dans l'onglet Styles : à la lecture, elle était valide. Pour qu'une variable soit vérifiée dès sa déclaration, il faut l'enregistrer avec @property en indiquant son type (syntax: "<length>").