Une valeur de repli — exercice corrigé de CSS : mettre en forme le Web (école d'ingénieur) (chapitre 1)

Une valeur de repli

Premiers pas en CSS · niveau 3 (difficile)

Énoncé

On rencontre souvent dans les feuilles de style des déclarations en double :


h1 {
  color: #1f3a68;
  color: oklch(35% 0.087 260deg);
}

La notation oklch() est récente (chapitre 4).

Quelle couleur un navigateur récent applique-t-il ? Et un navigateur trop ancien pour connaître oklch() ?
En déduire à quoi sert cette écriture.
Que se passerait-il si l'on inversait les deux lignes ?

Un navigateur récent comprend les deux déclarations ; la seconde l'emporte, et il applique la couleur oklch() (ici choisie très proche de #1f3a68). Un navigateur ancien trouve la seconde valeur invalide et l'ignore : il garde #1f3a68. On l'a vérifié dans Chromium en remplaçant oklch(…) par une fonction inventée (code/ch1/erreurs/ex11-repli.css) : le titre reste rgb(31, 58, 104).
C'est une valeur de repli : on écrit d'abord une valeur que tous les navigateurs comprennent, puis la valeur moderne. Ce motif exploite directement la règle « une déclaration invalide est ignorée ».
Inversées, les deux lignes ne servent plus à rien : un navigateur récent appliquerait #1f3a68, la dernière, et n'utiliserait jamais la valeur moderne.