Héritage

Podcast CSS – 005: L'héritage

Imaginons que vous veniez d'écrire du code CSS pour que les éléments ressemblent à des boutons.

<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 link à un article de contenu, avec la valeur class de .my-button. Cependant, il y a un problème, le texte ne correspond pas à la couleur que vous attendiez. Que s'est-il passé ?

Si vous n'indiquez aucune valeur, certaines propriétés CSS héritent des paramètres. Dans le cas de ce bouton, il a hérité le color de ce CSS:

article a {
  color: maroon;
}

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

Flux d'héritage

Examinons le fonctionnement de l'héritage, à l'aide de l'extrait de code HTML suivant:

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

L'élément racine (<html>) n'hérite de rien, car il s'agit du premier élément du document. Ajoutez du code CSS à l'élément HTML, et il commencera à se répercuter sur 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 pouvant hériter d'une couleur auront désormais une couleur de lightslategray.

body {
  font-size: 1.2em;
}

p {
  font-style: italic;
}

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

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

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

Fonctionnement de l'héritage

Chaque élément HTML a 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 apparaît par défaut si la cascade ne parvient pas à calculer une valeur pour cet élément.

Les propriétés pouvant être héritées sont diffusées en cascade 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 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éfinie 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. Le CSS dispose donc d'outils pour vous aider.

Le mot clé inherit

Vous pouvez configurer une propriété pour qu'elle hérite de la valeur calculée de son parent à l'aide du mot clé inherit. Pour utiliser ce mot clé, vous pouvez créer des exceptions.

strong {
  font-weight: 900;
}

Cet extrait CSS définit tous les éléments <strong> comme ayant une font-weight de 900, au lieu de la valeur bold par défaut, qui serait l'équivalent de font-weight: 700.

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

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

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

Désormais, les éléments <strong> dans .my-component auront une 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 garantir que votre <strong> sera automatiquement à jour.

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 performante.

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

aside strong {
  font-weight: initial;
}

Cet extrait supprimera l'épaisseur en gras de tous les éléments <strong> d'un élément <aside> et le rendra normal, qui correspond à 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 contexte, unset peut s'avérer utile. 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;
}

Désormais, margin est supprimé, et color revient à 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 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, les styles globaux qui seront appliqués à p à l'avenir n'auront pas d'importance, ils seront toujours non définis.

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 peuvent être 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 et ensuite comme initial ?

reset
valeur non valide, réessayez !
unset
🎉
superset
valeur non valide, réessayez !

Ressources