Quelle règle s'applique ? — exercice corrigé de CSS : mettre en forme le Web (école d'ingénieur) (chapitre 9)

Quelle règle s'applique ?

Responsive design · niveau 2

Énoncé


.bandeau {
  color: black;
}

@media (width >= 40rem) {
  .bandeau {
    color: blue;
  }
}

@media (width >= 64rem) {
  .bandeau {
    color: green;
  }
}

@media (30rem <= width < 50rem) {
  .bandeau {
    color: red;
  }
}

De quelle couleur est le bandeau dans une fenêtre de 400, 560, 700, 800 et 1100 pixels ? (1rem vaut 16 pixels.) Quelle maladresse cette feuille contient-elle ?

Corrigé

En pixels : $40 rem = 640$ , $64 rem = 1024$ , $30 rem = 480$ , $50 rem = 800$ . Les quatre règles ont la même spécificité : parmi celles dont la requête est vraie, la dernière écrite l'emporte.

400 : aucune requête n'est vraie : noir.
560 : seule la requête rouge (entre 480 et 800) est vraie : rouge.
700 : la bleue et la rouge sont vraies ; la rouge est écrite après : rouge.
800 : la rouge exclut 800 (width < 50rem) ; la bleue est vraie : bleu.
1100 : bleue et verte vraies, la verte est après : vert.

Chromium donne bien rgb(0, 0, 0), rgb(255, 0, 0) (deux fois), rgb(0, 0, 255) et rgb(0, 128, 0). La maladresse : la requête rouge, écrite en dernier, annule la bleue entre 640 et 800 pixels ; en lisant la feuille de haut en bas, on croit que le bandeau est bleu dès 640. Les requêtes d'une feuille mobile d'abord devraient être des seuils croissants, sans intervalle qui revient en arrière.