La cascade

Dans cette page

La cascade est le mécanisme par lequel le navigateur va déterminer l’apparence d’un élément en agglomérant les propriétés CSS et les valeurs issues de plusieurs sélecteurs et de l’héritage de l’élément.

L’héritage

Les propriétés héritées

<body>
  <article>
    <p>
      <span>Iggy Pop, ami de <strong>David Bowie</strong></span>
      <i>est un artiste américain du vingtième siècle.</i>
    </p>
  </article>
</body>
body {
  color: blue;
  border: 1px solid red;
}

Dans l’exemple ci-dessus, l’ensemble des éléments HTML sont bleus car la propriété color est héritable, cela signifie que la couleur est ici définie par la couleur appliquée à l’élément parent (body).

Cependant certaines propriétés ne sont pas héritées, c’est ce que l’on peut constater dans l’exemple ci-dessus, les éléments appartenant au body n’ont pas de bordure bleue.

Une liste des propriétés héritées.

Des éléments qui n’héritent pas

En CSS certains éléments ne vont pas hériter de propriétés par d’autres éléments, les liens (a) et les éléments de formulaire n’héritent pas de toutes les propriétés.

<p>
  Lust for life
  <a href="iggy.html">Découvrir l’artiste</a>
  <span>Iggy Pop</span>
  <button>Voir la description</button>
</p>
body { color: red }

Ici le texte sera bien rouge à l’exception des liens et du bouton qui garderont leur couleur par défaut.

Forcer l’héritage

body { color: red }
a, button { color: inherit }

Appliqué au code HTML précédent, ce code CSS va permettre aux liens et aux boutons d’être en rouge comme tous les autres éléments.

Une pratique du monde réel

Une autre pratique consiste à rendre l’héritage de certaines propriétés comme étant autorisé sur tous les éléments de la manière suivante :

* { font-family: inherit; }
body { font-family: monospace; }

Dans cet exemple tous les éléments faisant partie du document utiliseront une police à espacement fixe (monospace).

La spécificité

En CSS, c’est la dernière déclaration qui sera appliquée mais tous les sélecteurs ne sont pas égaux face au calcul de spécificité.

De quelle couleur est le paragraphe ?

<article id="art">
  <p class="question" id="quest">Je suis de quelle couleur ?</p>
</article>
p { color: blue }
p { color: rebeccapurple }
p { color: red }

On commence doucement, dans ce code l’élément p sera rouge, car en CSS, la dernière déclaration aura le fin mot si les sélecteurs sont de même types.

Corsons un peu les choses

Avec le même extrait de code HTML, quelle est la couleur du paragraphe (p) ?

article { color: blue }
.question { color: rebeccapurple }
p { color: red }

Le paragraphe sera ici violet (rebeccapurple) car la sélection par class a plus de poids que la sélection par type.

La couleur appliquée par le sélecteur parent (article) est encore plus faible dans ce calcul.

Encore un peu plus difficile ?

article { color: blue }
#quest { color: orange }
.question { color: rebeccapurple }
p { color: red }

Comme dans ce code CSS nous effectuons une sélection par id (#quest), la couleur du paragraphe sera orange car le sélecteur d’id a plus de poids que la sélection par class.

Un dernier pour la route

La même question avec le même code HTML.

#art #quest { color: blue}
.question { color: rebeccapurple}
#quest { color: orange }
p { color: red }

Cette fois ci le paragraphe sera bleu, le premier sélecteur contient deux id, il gagne.

Si vous aimez jouer, voici un calculateur de spécificité CSS.

!important

Cette déclaration est une invention maléfique. Elle permet d’outre-passer la spécificité d’une déclaration en la priorisant.

C’est vrai que c’était déjà trop simple.

.question { color: rebeccapurple !important}
#quest { color: orange }

Le paragraphe sera orange, !important surpasse l’id dans cet exemple.

La présence de cette déclaration est l’indice d’un code de mauvaise qualité et sûrement difficile à maintenir.

Éviter les crampes aux doigts et les mots de tête ?

Dans le monde réel, on ne joue pas avec la spécificité, car le code est amené à être manipulé par différents intervenant(e)s de niveaux de connaissance différents du langage CSS.

Pour simplifier le travail de chacun :

Références