Héritage

Podcast CSS – 005: Inheritance

Imaginons que vous venez d'écrire du code CSS pour que les é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 "Lien" à un article de contenu, avec une valeur class de .my-button. Cependant, il y a un problème, le texte n'est pas de la couleur que vous pensiez qu'il serait. Que s'est-il passé ?

Certaines propriétés CSS en héritent si vous ne spécifiez pas de valeur. Dans ce cas, le bouton color a été hérité de ce CSS:

article a {
  color: maroon;
}

Dans cette leçon, vous découvrirez pourquoi cela se produit et en quoi l'héritage est une fonctionnalité efficace qui vous aide à écrire moins de CSS.

Flux d'héritage

Voyons comment fonctionne l'héritage, à l'aide de cet extrait de code HTML:

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

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

html {
  color: lightslategray;
}

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

body {
  font-size: 1.2em;
}

p {
  font-style: italic;
}

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

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

Certaines propriétés CSS ne sont pas héritées par défaut, mais il y en a beaucoup. Pour information, voici la liste complète des propriétés héritées par défaut. Extrait de la référence W3 de toutes les propriétés CSS:

Fonctionnement de l'héritage

Pour chaque élément HTML, chaque propriété CSS est définie par défaut avec une valeur initiale. Une valeur initiale est une propriété non héritée 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 et les éléments enfants obtiendront une valeur calculée qui représente la valeur de leur parent. Cela signifie que si font-weight est défini sur bold pour un parent, tous les éléments enfants seront en gras. sauf si leur font-weight est défini sur une valeur différente, ou si la feuille de style user-agent comporte une valeur font-weight pour cet élément.

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

L'héritage peut affecter les éléments de manière inattendue. C'est pourquoi CSS dispose d'outils pour vous aider.

Le mot clé inherit

Vous pouvez faire en sorte qu'une propriété hérite de la valeur calculée de son parent à l'aide du mot clé inherit. Un bon moyen d'utiliser ce mot clé consiste à créer des exceptions.

strong {
  font-weight: 900;
}

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

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

À la place, la classe .my-component définit font-weight sur 500. Pour que les éléments <strong> dans .my-component soient également font-weight: 500, ajoutez:

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

Les éléments <strong> dans .my-component auront désormais un font-weight de 500.

Vous pouvez définir explicitement cette valeur, mais si vous utilisez inherit et que le CSS de .my-component change, vous pouvez vous assurer que votre <strong> sera automatiquement à jour en conséquence.

Le mot clé initial

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

Comme nous l'avons vu précédemment, chaque propriété possède une valeur par défaut en CSS. Le mot clé initial redéfinit une propriété sur cette valeur initiale par défaut.

aside strong {
  font-weight: initial;
}

Cet extrait supprime l'épaisseur de caractères en gras de tous les éléments <strong> à l'intérieur d'un élément <aside> et : faire d'une pondération 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 mémoriser les propriétés CSS héritées par défaut, unset peut être utile dans ce contexte. Par exemple, color est hérité par défaut, mais pas margin. 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;
}

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

Vous pouvez également utiliser la valeur unset avec la propriété all. Pour en revenir à l'exemple ci-dessus, Que se passe-t-il si les styles p globaux obtiennent quelques propriétés supplémentaires ? Seule la règle définie pour margin et color sera appliquée.

/* 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. elles seront toujours non définies.

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

Testez vos connaissances

Tester vos connaissances sur l'héritage

Parmi les propriétés suivantes, lesquelles sont héritées ?

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 ? se comporte ensuite comme initial ?

reset
n'est pas une valeur valide, réessayez !
unset
🎉
superset
n'est pas une valeur valide, réessayez !

Ressources