Qu'est-ce que le sélecteur :root ?
Le sélecteur :root est une pseudo-classe qui cible l'élément racine du document, qui est presque toujours l'élément < html> en HTML. Il est l'endroit parfait pour définir des variables CSS (aussi appelées Custom Properties) car elles deviennent globalement disponibles dans toute la feuille de style.
Définition des Variables Globales
En utilisant :root, on peut définir des propriétés personnalisées avec la syntaxe --nom-de-la-variable. Cela nous permet de centraliser des valeurs comme les couleurs, les tailles de police ou les marges.
:root {
--clr-principal-bg: #f0f0f5;
--taille-marge: 20px;
--rayon-bordure: 8px;
}
body {
background-color: var(--clr-principal-bg);
}
Application au Dark Mode (Thèmes)
L'un des usages les plus puissants est la gestion de thèmes. En redéfinissant les variables globales sur le < body> (ou l'élément racine) lorsque le mode sombre est activé, nous changeons l'apparence de tout le site en une seule fois.