L’évolution de CSS a été marquée par une complexité d’utilisation. Les préprocesseurs CSS ont émergé pour simplifier cette tâche, introduisant des fonctionnalités avancées telles que les boucles et les mixins. Au fil du temps, CSS a gagné en puissance, adoptant des caractéristiques initialement proposées par les préprocesseurs, notamment le concept de « styles imbriqués ».
VIDEO MUO DU JOUR
DÉFILEZ POUR LE CONTENU
Le style imbriqué permet aux développeurs d’organiser les règles CSS de manière hiérarchique, reflétant la structure HTML. Cette approche améliore la lisibilité du code, en rendant la relation entre les éléments HTML et leurs styles visuellement explicite.
Style imbriqué : l’approche traditionnelle
Le style imbriqué est une fonctionnalité présente dans plusieurs préprocesseurs CSS, tels que Sass, Stylus et Less CSS. Bien que la syntaxe puisse varier, le principe reste le même. Pour styliser tous les éléments h1 contenus dans un div avec la classe « container », le CSS standard nécessitait une écriture comme suit :
.container {
background-color: #f2f2f2;
}.container h1 {
font-size: 44px;
}
Dans un préprocesseur comme Less CSS, l’implémentation du style imbriqué se ferait de cette manière :
.container{
background-color: #f2f2f2; h1 {
font-size:44px;
}
}
Bien que les deux blocs de code produisent le même résultat visuel, la version avec imbrication facilite grandement la compréhension de la structure et de l’application des styles. Cette organisation hiérarchique a été un argument clé en faveur de l’adoption des préprocesseurs CSS.
Il est possible d’imbriquer des styles sur plusieurs niveaux, sans limite. Cependant, une imbrication excessive peut nuire à la clarté et rendre le code plus difficile à gérer.
Le style imbriqué natif dans CSS
La prise en charge du style imbriqué natif n’est pas encore universelle. Le site Puis-je utiliser… est une ressource utile pour vérifier la compatibilité de cette fonctionnalité avec les navigateurs ciblés.
L’implémentation du style imbriqué dans CSS natif est similaire à celle des préprocesseurs, permettant d’imbriquer tout sélecteur dans un autre. Cependant, il existe une différence essentielle à prendre en compte. Examinez l’exemple de code ci-dessous :
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Style imbriqué dans CSS</title>
</head>
<body>
<div class="container">
<h1>Bonjour depuis les enfants de la planète Terre!</h1>
</div>
<style>
.container {
background-color: red;h1 {
color: yellow;
}
}
</style>
</body>
</html>
Dans ce code, le div avec la classe « container » a un fond rouge. Le style de l’élément h1 est défini à l’intérieur du bloc « .container », avec une couleur jaune. L’exécution de ce code dans un navigateur montre un comportement inattendu. Le fond rouge est correctement appliqué au div, mais le h1 ne reçoit pas le style de couleur jaune.
En effet, l’imbrication fonctionne différemment en CSS natif par rapport aux préprocesseurs. Il n’est pas possible de cibler directement un élément HTML à l’intérieur d’une arborescence imbriquée. Pour cela, il est nécessaire d’utiliser le caractère esperluette (&), comme dans l’exemple ci-dessous :
.container {
background-color: red; & h1 {
color: yellow;
}
}
Dans ce cas, & fait référence au sélecteur parent. En plaçant l’esperluette avant l’élément h1, on indique au navigateur de cibler tous les éléments h1 qui sont des enfants du conteneur div. En exécutant ce code dans le navigateur, on obtient le résultat attendu.
L’esperluette étant la référence à l’élément parent, il est tout à fait possible de cibler les pseudo-classes et les pseudo-éléments d’un élément, comme suit :
.parent1{
&:hover{
background-color: red;
}
&::before{
content:"Voici un pseudo élément.";
}
}
Avant l’arrivée du style imbriqué en CSS, pour appliquer des styles conditionnels selon la largeur du navigateur, on utilisait une méthode comme celle-ci :
p {
color:black;
}@media (min-width:750px) {
p {
color:gray;
}
}
Au rendu de la page, le navigateur évalue la couleur de l’élément p en fonction de la largeur de la fenêtre. Si la largeur dépasse 750px, la couleur grise est utilisée, sinon, la couleur par défaut (noir) est appliquée.
Bien que cette approche fonctionne, elle peut rapidement devenir complexe, surtout en cas d’applications de nombreux styles conditionnels. Il est désormais possible d’imbriquer les media queries directement dans un bloc de style, à l’intérieur d’un élément :
p {
color:black; @media (min-width:750px) {
color:gray;
}
}
Ce bloc de code produit le même résultat que le précédent, avec l’avantage d’être plus facile à lire et à comprendre. La combinaison d’une requête média et de l’élément parent permet de visualiser clairement l’application des styles en fonction des conditions spécifiées.
Mise en pratique : styliser un site Web avec les styles imbriqués CSS
Il est temps d’appliquer les concepts appris en créant un site web simple qui utilise le style imbriqué de CSS. Commencez par créer un dossier, avec un nom de votre choix. Dans ce dossier, créez deux fichiers : index.htm et style.css.
Dans le fichier index.htm, insérez le code suivant :
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="https://wilku.top/how-to-use-native-css-nesting-in-your-web-applications/style.css" />
<title>Site Web simple</title>
</head>
<body>
<div class="container">
<div class="article">
<h1>Lorem ipsum dolor sit amet consectetur adipisicing elit.</h1>
<div class="meta-data">
<span class="author">David Uzondu</span>
<span class="time">il y a 3 heures</span>
</div>
<div>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Illo ut
quasi hic sint dolorum sapiente magni ratione? Suscipit commodi ad,
asperiores nostrum natus aperiam et alias, officiis dolorum ipsa vero
minima consequatur recusandae quasi aliquid quibusdam ducimus eaque!
Excepturi voluptas eveniet nemo, earum doloribus, soluta architecto
iste repellat autem aspernatur beatae ut quis odio est voluptates sunt
qui rerum blanditiis minus! Rerum labore nobis, odit quod amet dolorum
quae laudantium.
</div>
</div>
<div class="sidebar">
<h2>Articles Tendances</h2>
<h4>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Fugit, iusto ipsum!</h4>
</div>
</div>
</body>
</html>
Ce code HTML représente la structure d’un simple site de type news. Ensuite, ouvrez le fichier style.css et ajoutez ce code :
.container {
display: flex;
gap: 25px; @media(max-width:750px) {
flex-direction: column;
}
.article{
width:90%;
}
& div:nth-child(3) {
text-align: justify;
}
& span {
color: rgb(67, 66, 66);
&:nth-child(1)::before {
font-style: italic;
content: "Écrit par ";
}
&:nth-child(2) {
font-style: italic;
&::before {
content: " ~ ";
}
}
}
.meta-data {
margin-bottom: 10px;
padding-bottom: 10px;
border-bottom: solid 1px;
}
}
Ce code CSS applique tous les styles à la page web en utilisant le style imbriqué. Le sélecteur « .container » est le point de départ. Le symbole & permet de référencer le sélecteur parent. L’exécution de ce code dans le navigateur affiche le résultat souhaité :
Les préprocesseurs CSS sont-ils toujours nécessaires ?
L’introduction des styles imbriqués dans CSS natif pourrait faire penser que les préprocesseurs CSS sont devenus superflus. Cependant, il faut garder à l’esprit que les préprocesseurs offrent plus que le simple style imbriqué. Ils fournissent des fonctionnalités telles que les boucles, les mixins, les fonctions, etc. En fin de compte, le choix d’utiliser ou non un préprocesseur CSS dépend de votre cas d’utilisation et de vos préférences personnelles.