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:
- azimut
- border-collapse
- border-spacing
- côté légende
- color
- cursor
- direction
- cellules-vides
- famille-polices
- font-size
- font-style
- font-variant
- font-weight
- police
- espacement-lettre
- line-height
- list-style-image
- list-style-position
- list-style-type
- list-style
- orphelins
- citations
- text-align
- text-indent
- text-transform
- Visibilité
- white-space
- veuves
- word-spacing
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
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
unset
superset