Temps de lecture approximative : 9 minutes
Chapitre 2 - Héritage en cascade
La notion d'héritage en CSS est très importante. C'est l'essence même du langage et le nom de ce dernier n'y est pas étranger. Dans ce chapitre, nous nous focaliserons sur sa compréhension.
Une histoire de famille
L'héritage en CSS repose sur des parents et des enfants. Chaque élément ou balise a au moins un parent, à l'exception de la balise <html> qui n'a que des enfants. L'imbrication des balises HTML et l'indentation mettent en relief cette notion. Un élément ou une balise peut avoir des parents et des enfants. L'exemple ci-après va vous aider à comprendre.
<body>
<h1 id="super">Roger, maître du HTML et dresseur de pokémon</h1>
<div>
<p>
<span>Enfant</span>
</p>
</div>
</body>Dans cet exemple, toutes les balises ont <body> comme parent. La balise <h1> a <body> comme parent mais n'a pas d'enfant. Tandis que la balise <span> a pour parents <p>, <div> et <body>. En CSS, chaque élément ou balise enfant reçoit en héritage tous les styles de son parent.
La balise ou l'élément enfant héritera des styles de ses parents uniquement si ces styles s'héritent. En effet, l'héritage ne fonctionne pas avec toutes les propriétés, et notamment margin: ou padding:. Nous reviendrons sur cette notion plus tard dans le cours.
Ordre de priorité
Cette notion d'héritage est puissante et pratique mais il convient de bien la comprendre pour la maîtriser parfaitement. En effet, il y a un ordre de priorité. Travaillons sur l'exemple suivant :
<body>
<h1 id="super">Roger, maître du HTML et dresseur de pokémon</h1>
<h2>Présentation</h2>
<p>Bonjour et bienvenue sur mon site. Je m'appelle <span>Roger</span> et je suis désormais un maître de niveau 99 en HTML.</p>
<h2>Mes pokémons</h2>
<p>Je collectionne les pokémons avec l'application <span>Pokémon GO</span>. C'est mon jeu préféré, j'adore.</p>
<h2>Mes autres passions</h2>
<p class="mega">
Après Pokémon GO, mon autre passion est le football. Je supporte l'équipe de Dunkerque et je rêve de voir mon équipe préférée écraser le <span>PSG</span>.
</p>
<p class="mega">
Si je ne joue pas à <span>Pokémon GO</span> et que je ne regarde pas un match de football de Dunkerque, j'écoute du Céline Dion.
</p>
</body>body {
color: red;
}
p {
color: orange;
}
p {
color: black;
}
.mega {
color: blue;
}
Lançons-nous dans l'interprétation de l'exemple. Seule la propriété color: a été utilisée pour favoriser ce que l'on appelle les conflits. Un conflit est déclaré quand un élément ou une balise a ou hérite de valeurs différentes pour une même propriété. La déclaration la plus proche ou plus précise de l'élément sera prioritaire. Notre exemple nous le démontre.
Procédons dans l'ordre hiérarchique du fichier CSS. Une propriété color: a été définie pour <body>. Ainsi, tous ses enfants en héritent, donc dans notre exemple, absolument toutes les autres balises. Les titres <h1> et <h2> sont en rouge car il n'y a pas d'autres déclarations qui les ciblent. Ils héritent donc du style du parent <body>.
En ce qui concerne les paragraphes, ça se complique. Il y a deux déclarations pour le même sélecteur : p {}. Pour ce cas, la règle est simple. Le navigateur web lit les feuilles de styles de manière séquentielle, c'est-à-dire dans l'ordre où elles sont écrites. C'est donc la dernière règle qui a la priorité. Ainsi dans notre exemple, c'est la couleur noire qui l'emporte sur l'orange. Pour autant, nous sommes face à notre premier conflit. Les paragraphes doivent-ils être en rouge ou en noir ? En noir. En effet, le sélecteur p {} étant plus précis et proche que body {}, les styles de p {} l'emportent.
On remarque que, en l'absence de déclaration plus précise, les éléments <span> héritent bien des styles de leurs parents <p>.
Problème, les deux premiers paragraphes sont bien en noir, mais pourquoi diantre n'est pas le cas pour les deux derniers ?
La dernière déclaration de notre fichier CSS est en cause : .mega {}. Nous sommes face à un nouveau conflit. Les deux derniers paragraphes héritent de la couleur rouge grâce à leur parent <body>, puis héritent de la couleur noire grâce à leur parent <p>, mais sont finalement en bleu. Il semble pourtant à première vue que les déclarations p {} et .mega {} sont aussi proches et précises l'une que l'autre. La réponse se trouve dans le poids des sélecteurs.
Poids des sélecteurs
En CSS, les sélecteurs ont un poids. En effet, comme nous venons de le voir, les deux derniers paragraphes sont en bleu car le sélecteur de classe a un poids supérieur au poids du sélecteur d'élément. La notion de poids est relativement complexe. Le cours étant destiné à un public débutant, nous la simplifierons légèrement.
Sélecteur d'identifiant > sélecteur de classe >
sélecteur d'élément ou simple > sélecteur universel
Il faut donc comprendre que le poids d'une déclaration avec un sélecteur d'identifiant est supérieur à celui d'une déclaration avec un sélecteur de classe et ainsi de suite. La déclaration avec le sélecteur qui a le poids le plus important l'emporte sur les autres.
La règle est simplifiée car il existe d'autres types de selecteur d'éléments. Étant donné que nous ne les aborderons pas dans ce cours, la règle est correcte. Ouf, les grands maîtres du CSS ne m'assassineront pas pour ça dans mon sommeil. Pour bien comprendre cette règle, prenons le temps de voir un exemple détaillé.
<body>
<h1 id="top" class="bof">Roger, maître du HTML et dresseur de pokémon</h1>
</body>#top {
color: green;
}
.bof {
color: yellow;
}
h1 {
color: orange;
}
body {
color: red;
}
* {
color: yellow;
}Avec cet exemple, de quelle couleur est le titre ? La réponse est : vert. Les déclarations ne sont volontairement pas dans un ordre naturel. C'est pour mettre en relief que c'est le poids du sélecteur qui l'emporte sur les autres règles.
Conclusion
La compréhension de ce chapitre est incontournable pour mettre en forme une page web. C'est la base du fonctionnement du CSS. Vous serez sûrement amené à revenir sur ce chapitre pour vous remémorer certaines règles. C'est normal, ces notions ne sont pas simples. Elles se graveront dans votre mémoire en pratiquant. Pour mieux comprendre les ordres de priorité, vous pouvez également utiliser l'inspecteur d'éléments. Ce précieux outil vous permettra de vous aider dans la compréhension des règles de priorité.