Comprendre la cascade et l’héritage

Vous avez écrit une règle pour colorer un titre, mais le navigateur affiche une autre couleur. Ou plusieurs paragraphes semblent reprendre une mise en forme que vous ne leur avez pas donnée directement. Pour résoudre ces situations, vous devez comprendre comment CSS départage les règles et quelles propriétés se transmettent aux éléments enfants.

Dans la leçon « Cibler les éléments d’une page », vous avez appris à viser un élément par sa balise, sa classe, son identifiant ou sa position dans une partie de la page. Ici, vous allez voir ce qui se passe lorsque plusieurs déclarations concernent la même propriété du même élément.

La cascade départage les déclarations

La cascade est le mécanisme qui permet au navigateur de choisir la valeur finale d’une propriété lorsque plusieurs règles peuvent s’appliquer. Pour vos exemples, retenez trois critères pratiques : la priorité de la règle, la spécificité du sélecteur, puis l’ordre des règles lorsque les deux premiers critères sont équivalents.

Dans une feuille de style ordinaire, une déclaration indiquée avec !important prend priorité sur une déclaration ordinaire concurrente. Évitez d’en faire votre méthode habituelle : elle complique les modifications ultérieures. Dans une situation simple, deux règles ordinaires de même spécificité sont départagées par leur ordre : la dernière déclaration l’emporte pour la propriété concernée.

/* Les deux règles ciblent les paragraphes de la page. */
p {
    color: #314b35;
}

p {
    color: #7a3e2f;
}

Les paragraphes sont affichés en brun (#7a3e2f), car les deux sélecteurs ont la même spécificité et la dernière déclaration l’emporte.

Le navigateur ne remplace pas toute la première règle : il retient seulement la valeur gagnante pour color. Si la première règle définissait aussi font-size et qu’aucune règle concurrente ne modifiait cette propriété, cette taille resterait applicable.

La spécificité compare les sélecteurs

La spécificité mesure la précision d’un sélecteur pour départager plusieurs règles concurrentes. En simplifiant pour les sélecteurs utilisés ici, un identifiant est plus spécifique qu’une classe, et une classe est plus spécifique qu’une balise. Il ne s’agit pas de savoir quelle règle est écrite la plus près de l’élément dans le fichier, mais de comparer les sélecteurs qui définissent la même propriété.

/* La page de l’atelier contient un bloc de contact. */
p {
    color: #314b35;
}

.conseil {
    color: #7a3e2f;
}

#contact {
    color: #243b53;
}

Un paragraphe portant la classe conseil et situé dans l’élément id="contact" reçoit la couleur #243b53. La règle avec un identifiant est la plus spécifique des trois.

La règle de type p s’applique aux paragraphes, mais la classe puis l’identifiant fournissent des déclarations plus spécifiques pour la même propriété. Vous pouvez ainsi prévoir que le paragraphe de contact sera bleu, même si la règle .conseil apparaît plus bas dans le fichier que #contact.

L’héritage transmet certaines valeurs

L’héritage explique pourquoi certains éléments reprennent une valeur définie sur un élément qui les contient. Les propriétés liées au texte, comme color et font-family, sont généralement héritées. En revanche, vous ne devez pas supposer que toutes les propriétés le sont : une bordure définie sur un conteneur, par exemple, n’est pas automatiquement appliquée à chacun de ses enfants.

/* Le bloc contact transmet la couleur à son texte. */
#contact {
    color: #243b53;
}

#contact a {
    color: #7a3e2f;
}

Le texte ordinaire du bloc contact est bleu (#243b53). Le lien est brun (#7a3e2f), car sa propre règle remplace la valeur héritée pour color.

Une valeur héritée sert lorsqu’aucune déclaration applicable ne fixe directement cette propriété sur l’élément enfant. Dès qu’une règle cible le lien et définit sa couleur, cette valeur directe est utilisée à la place de celle reçue du parent. La valeur que le navigateur retient après avoir pris en compte les règles et l’héritage est la valeur calculée pour cet élément.

Méthode de diagnostic

Quand un style ne produit pas le résultat attendu, procédez dans cet ordre : identifiez l’élément concerné, puis la propriété dont la valeur vous surprend. Repérez ensuite toutes les règles qui définissent cette propriété, comparez leur priorité et leur spécificité, puis vérifiez si la valeur provient plutôt de l’héritage. Cette démarche évite d’ajouter une règle plus forte sans comprendre pourquoi la précédente ne s’appliquait pas.

À retenir

• La cascade choisit la valeur applicable en tenant compte de la priorité, de la spécificité et, en cas d’égalité, de l’ordre des règles.
• Pour les sélecteurs étudiés, un identifiant est plus spécifique qu’une classe, et une classe est plus spécifique qu’une balise.
• Les propriétés de texte comme color sont généralement héritées, mais une déclaration directe sur un enfant peut remplacer la valeur héritée.
• Pour diagnostiquer un style, comparez les règles qui définissent la même propriété avant d’en ajouter une nouvelle.

Dans la prochaine leçon, vous regrouperez les couleurs et les espacements dans des variables CSS afin de rendre la feuille de style plus facile à faire évoluer.