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

Suivre une variable

Variables, transitions, animations et projet · niveau 1 (application)

Énoncé

On reprend la page code/ch10/variables.html du cours. On y ajoute, à l'intérieur de la zone .promo, un bouton de classe bouton grand, et l'on ajoute à la zone la déclaration --espace: 0.5rem. Donner, pour ce nouveau bouton et pour l'ancien bouton de la zone : la couleur de fond, la couleur du texte, les marges internes et la marge droite. Que devient la marge interne de la zone elle-même ?

Corrigé

La zone déclare maintenant --accent: #f3e3d3 et --espace: 0.5rem ; ses descendants en héritent.

L'ancien bouton de la zone : fond #f3e3d3, texte #222 (repli), marges internes $0, 6 \times 8 = 4, 8$ et $1, 2 \times 8 = 9, 6$ pixels, marge droite 8 pixels : il rétrécit, puisque --espace vaut 8 pixels dans la zone.
Le nouveau bouton .grand redéfinit --espace: 1.5rem sur lui-même : cette valeur l'emporte sur celle qu'il hériterait. Marges internes de 14,4 et 28,8 pixels, marge droite de 24 pixels ; fond #f3e3d3 hérité de la zone.

La zone elle-même calcule padding: 0 var(--espace) var(--espace) avec sa propre valeur : 8 pixels. Une variable est lue sur l'élément qui l'utilise, avec la valeur que cet élément a reçue.