CSS : mettre en forme le Web (école d'ingénieur) · Chapitre 3 · Application directe du cours

Des couches

Cascade, spécificité et héritage · niveau 3 (difficile)

Énoncé


@layer reset, base, composants;

@layer composants {
  .alerte {
    color: #8c1d18;
  }
}

@layer base {
  #zone p {
    color: #1f3a68;
  }
}

@layer reset {
  * {
    color: #222;
  }
}

p {
  color: #555;
}


  <div id="zone">
    <p class="alerte">A — paragraphe d’alerte</p>
    <p>B — paragraphe ordinaire</p>
  </div>

Quelle est la couleur des paragraphes A et B ?
Même question si l'on supprime la dernière règle (hors couche).
Toujours sans elle, on remplace la première ligne par @layer reset, composants, base;. Que deviennent A et B ?
On revient à la feuille d'origine, et l'on rend importantes la déclaration de la couche reset et celle de la règle hors couche. Que deviennent A et B ?

Corrigé

A et B sont gris #555 : la règle p est hors couche, elle bat toutes les couches malgré sa spécificité minimale $(0, 0, 1)$ .
Sans elle : A est rouge foncé (couche composants, la dernière déclarée, bat base malgré #zone p $(1, 0, 1)$ ) ; B, qui n'est pas une alerte, est bleu nuit (couche base bat reset).
La couche base est maintenant la dernière : A et B sont bleu nuit. On a changé le résultat sans toucher à aucune règle, seulement à l'ordre des couches.
Les deux déclarations importantes l'emportent sur toutes les normales ; entre elles, l'ordre des couches s'inverse : la couche reset, la plus ancienne, bat la couche implicite hors couche. A et B sont gris très foncé #222.

Les quatre résultats ont été vérifiés dans Chromium (variantes de la feuille) : #555 et #555 ; #8c1d18 et #1f3a68 ; #1f3a68 deux fois ; #222 deux fois.

100 % gratuit

La suite du chapitre est sur Adloun

Exercice suivant et tuteur

Sans compte : le cours et le premier QCM. Exercices et tuteur : inscription gratuite en 30 secondes, sans carte bancaire.

Le cours du chapitre · Tous les exercices du chapitre

Exercice suivant et tuteur →