Le bouton de la carte — exercice corrigé de CSS : mettre en forme le Web (école d'ingénieur) (chapitre 5)

Le bouton de la carte

Le modèle de boîte · niveau 2

Énoncé

Ajouter à la carte d'un livre un bouton « Ajouter au panier » : toute la largeur de la carte, texte blanc sur fond bleu nuit, en forme de pilule, sans bordure, une ombre au survol, un contour visible au focus. Vérifier le contraste du texte (blanc sur #1f3a68) avec un outil de contraste. Quelle est la largeur du bouton dans une carte de 16 rem, bordure de 1 pixel, rembourrage de 1 rem, en content-box ?

Corrigé


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

.carte {
  width: 16rem;
  padding: 1rem;
  background: #fff;
  border: 1px solid #e2d8c9;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgb(0 0 0 / 10%);
}

.bouton {
  display: block;
  width: 100%;
  padding: 0.5rem 1rem;
  font: inherit;
  color: #fff;
  background: #1f3a68;
  border: 0;
  border-radius: 999px;
}

.bouton:hover {
  box-shadow: 0 2px 8px rgb(31 58 104 / 40%);
}

.bouton:focus-visible {
  outline: 3px solid #a8520a;
  outline-offset: 2px;
}

Le blanc sur #1f3a68 offre un contraste de 11,27:1. Le bouton est un bloc de width: 100%, soit la largeur du contenu de la carte : 16 rem $=$ 256 pixels (la carte, en content-box, mesure $256 + 32 + 2 = 290$ ). Chromium donne 256 pour le bouton et 290 pour la carte. Le bouton n'a pas de bordure : il a fallu border: 0 pour retirer celle du navigateur, et font: inherit pour qu'il prenne la police de la page.