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:
- azimut
- frontière-réduire
- border-spacing
- côté sous-titres
- couleur
- cursor
- direction
- cellules vides
- font-family
- font-size
- font-style
- font-variant
- épaisseur-de-la-police
- police
- letter-spacing
- line-height
- list-style-image
- list-style-position
- list-style-type
- list-style
- orphelins
- devis
- texte-align
- retrait du texte
- text-transform
- visibilité
- espace blanc
- veuves
- word-spacing
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 ?
text-align
animation
color
line-height
font-size
Quelle valeur se comporte comme inherit
, sauf s'il n'y a rien à hériter ?
se comporte ensuite comme initial
?
superset
reset
unset