Héritage

The CSS Podcast – 005 : Héritage

Imaginons que vous venez d'écrire du code CSS pour que des éléments ressemblent à un bouton.

<a href="http://example.com" class="my-button">I am a button link</a>

.my-button {
  display: inline-block;
  padding: 1rem 2rem;
  text-decoration: none;
  background: pink;
  font: inherit;
  text-align: center;
}

Vous ajoutez ensuite un élément de lien à un article de contenu, avec une valeur class de .my-button. Cependant, il y a un problème : le texte n'a pas la couleur que vous attendiez. Que s'est-il passé ?

Certaines propriétés CSS sont héritées si vous ne spécifiez pas de valeur pour elles. Dans le cas de ce bouton, il a hérité de color à partir de ce CSS :

article a {
  color: maroon;
}

Dans cette leçon, vous allez découvrir pourquoi cela se produit et comment l'héritage est une fonctionnalité puissante qui vous aide à écrire moins de code CSS.

Flux d'héritage

Découvrez comment fonctionne l'héritage à l'aide de cet extrait HTML :

<html>
  <body>
    <article>
      <p>Lorem ipsum dolor sit amet.</p>
    </article>
  </body>
</html>

L'élément racine (<html>) n'hérite d'aucun style, car il s'agit du premier élément du document. Ajoutez du CSS à l'élément HTML, et il commence à se propager dans le document.

html {
  color: lightslategray;
}

La propriété color est héritée par défaut par les autres éléments. L'élément html possède color: lightslategray. Par conséquent, tous les éléments pouvant hériter d'une couleur auront désormais la couleur lightslategray.

body {
  font-size: 1.2em;
}

p {
  font-style: italic;
}

Seul l'élément <p> aura du texte en italique, car il s'agit de l'élément imbriqué le plus profond. L'héritage ne s'applique que vers le bas, et non vers les éléments parents.

Quelles propriétés sont héritées par défaut ?

Toutes les propriétés CSS ne sont pas héritées par défaut, mais beaucoup le sont. Pour référence, voici la liste complète des propriétés héritées par défaut, tirée de la référence W3 de toutes les propriétés CSS :

Fonctionnement de l'héritage

Chaque élément HTML possède chaque propriété CSS définie par défaut avec une valeur initiale. Une valeur initiale est une propriété qui n'est pas héritée et qui s'affiche par défaut si la cascade ne parvient pas à calculer une valeur pour cet élément.

Les propriétés qui peuvent être héritées sont transmises de manière séquentielle vers le bas, et les éléments enfants obtiennent une valeur calculée qui représente la valeur de leur parent. Cela signifie que si un parent a la valeur bold pour font-weight, tous les éléments enfants seront en gras, sauf si leur font-weight est défini sur une autre valeur ou si la feuille de style de l'agent utilisateur a une valeur pour font-weight pour cet élément.

Hériter explicitement et contrôler l'héritage

L'héritage peut affecter les éléments de manière inattendue. C'est pourquoi le CSS propose des outils pour y remédier.

Le mot clé inherit

Vous pouvez faire en sorte que n'importe quelle propriété hérite de la valeur calculée de son parent avec le mot clé inherit. Une façon utile d'utiliser ce mot clé est de créer des exceptions.

strong {
  font-weight: 900;
}

Cet extrait CSS définit la valeur font-weight de tous les éléments <strong> sur 900, au lieu de la valeur par défaut bold, qui équivaudrait à font-weight: 700.

.my-component {
  font-weight: 500;
}

La classe .my-component définit font-weight sur 500. Pour que les éléments <strong> à l'intérieur de .my-component soient également font-weight: 500, ajoutez :

.my-component strong {
  font-weight: inherit;
}

Désormais, les éléments <strong> à l'intérieur de .my-component auront une valeur font-weight de 500.

Vous pouvez définir explicitement cette valeur, mais si vous utilisez inherit et que le CSS de .my-component change à l'avenir, vous pouvez être sûr que votre <strong> restera automatiquement à jour.

Le mot clé initial

L'héritage peut entraîner des problèmes avec vos éléments. initial vous offre une option de réinitialisation puissante.

Vous avez appris précédemment que chaque propriété a une valeur par défaut en CSS. Le mot clé initial rétablit la valeur par défaut initiale d'une propriété.

aside strong {
  font-weight: initial;
}

Cet extrait de code supprime la mise en gras de tous les éléments <strong> à l'intérieur d'un élément <aside> et les remplace par une mise en forme normale, qui est la valeur initiale.

Le mot clé unset

La propriété unset se comporte différemment selon qu'une propriété est héritée par défaut ou non. Si une propriété est héritée par défaut, le mot clé unset sera identique à inherit. Si la propriété n'est pas héritée par défaut, le mot clé unset est égal à initial.

Il peut être difficile de se souvenir des propriétés CSS héritées par défaut. Dans ce cas, unset peut être utile. Par exemple, color est hérité par défaut, mais margin ne l'est pas. Vous pouvez donc écrire ceci :

/* Global color styles for paragraph in authored CSS */
p {
  margin-top: 2em;
  color: goldenrod;
}

/* The p needs to be reset in asides, so you can use unset */
aside p {
  margin: unset;
  color: unset;
}

Désormais, margin est supprimé et color redevient la valeur calculée héritée.

Vous pouvez également utiliser la valeur unset avec la propriété all. Pour revenir à l'exemple précédent, que se passe-t-il si les styles p globaux reçoivent quelques propriétés supplémentaires ? Seule la règle définie pour margin et color s'appliquera.

/* Global color styles for paragraph in authored CSS */
p {
    margin-top: 2em;
    color: goldenrod;
    padding: 2em;
    border: 1px solid;
}

/* Not all properties are accounted for anymore */
aside p {
    margin: unset;
    color: unset;
}

Si vous remplacez la règle aside p par all: unset, peu importe les styles globaux qui seront appliqués à p à l'avenir, ils seront toujours supprimés.

aside p {
    margin: unset;
    color: unset;
    all: unset;
}

Le mot clé revert

Comme vous l'avez appris dans la leçon sur la cascade, les styles proviennent de différentes sources : les styles de base de l'user-agent, les styles de préférences de l'utilisateur et les styles que vous avez créés. Le mot clé revert annule les styles définis dans la même origine que celle où le mot clé revert est utilisé.

Cette option est utile lorsque vous avez défini un style, mais que vous ne souhaitez pas qu'il s'applique dans certains cas. Alors que inherit, initial et unset spécifient comment calculer la valeur d'un style, revert indique uniquement que les autres styles que vous avez écrits ne s'appliquent pas.

p {
  padding: 2em;
}

aside p {
  padding: revert;
}

Cet extrait attribue une marge intérieure aux éléments <p>, mais lorsqu'un élément <p> se trouve dans un élément <aside>, il ne spécifie aucun padding. Il revient plutôt à un style de préférence utilisateur (si un style est défini) ou aux styles de base de l'agent utilisateur.

Le mot clé revert-layer

Les calques en cascade permettent d'organiser vos styles et de leur attribuer une priorité dans l'origine de l'auteur de la cascade. Le mot clé revert-layer est semblable à revert, mais au lieu de spécifier qu'aucun de vos styles d'auteur ne doit être appliqué à une propriété, il annule uniquement les styles du calque actuel.

Si vous utilisez une bibliothèque d'UI tierce, un modèle utile consiste à l'importer dans un calque et à ajouter des remplacements dans un calque de priorité supérieure. Vous pouvez ensuite supprimer un remplacement à l'aide de revert-layer. Les valeurs par défaut de la bibliothèque d'UI seront alors utilisées.

Si aucune autre couche ne spécifie de valeur pour la propriété, elle se comportera comme revert et utilisera une valeur provenant d'une origine antérieure.

Vérifier que vous avez bien compris

Tester vos connaissances sur l'héritage

Quelles propriétés sont héritées par défaut ?

animation
Les animations ne sont pas transmises aux enfants.
font-size
🎉
color
🎉
text-align
🎉
line-height
🎉

Quelle valeur se comporte comme inherit, sauf s'il n'y a rien à hériter, puis se comporte comme initial ?

reset
Cette valeur n'est pas valide. Réessayez.
unset
🎉
superset
Cette valeur n'est pas valide. Réessayez.

Ressources