1.1 Qu'est-ce que les variables CSS ?
Les variables CSS, également connues sous le nom de propriétés personnalisées (custom properties), sont des variables déclarées dans CSS, qui peuvent être utilisées pour stocker des valeurs telles que des couleurs, dimensions, polices, et d'autres attributs CSS. Elles offrent des possibilités efficaces pour améliorer la flexibilité et la maintenabilité des styles sur les pages web.
Qu'est-ce que les variables CSS ?
Les variables CSS sont des variables qui peuvent stocker des valeurs de propriétés CSS et être réutilisées dans différentes
parties des styles. Elles sont définies avec un double tiret (--) et peuvent être assignées dans n'importe quel sélecteur, mais le plus souvent
elles sont définies dans le sélecteur racine :root, pour les rendre accessibles partout dans le document.
Exemple :
:root {
--main-color: #3498db;
--secondary-color: #2ecc71;
--font-size: 16px;
}
Caractéristiques principales des variables CSS :
- Réutilisation: Les variables CSS permettent de définir une valeur une seule fois et de l'utiliser plusieurs fois dans différentes parties du code CSS. Cela aide à éviter la duplication et simplifie la gestion des styles.
- Flexibilité: Les valeurs des variables CSS peuvent changer en fonction des conditions, telles que l'état d'un élément ou les media queries. Cela permet de créer des styles plus adaptatifs et dynamiques.
- Héritage: Les variables CSS sont héritées des éléments parents aux éléments enfants, ce qui simplifie la gestion et l'organisation des styles.
- Gérabilité: L'utilisation des variables facilite la maintenance du code car les modifications des valeurs des variables se reflètent automatiquement sur tous les éléments utilisant ces variables.
1.2 Exemples d'utilisation des variables CSS
Exemple d'utilisation des variables CSS en JavaScript :
document.documentElement.style.setProperty('--main-color', '#e74c3c');
Exemple 1 : Définition et utilisation des variables
:root {
--main-bg-color: #f0f0f0;
--main-text-color: #333;
--primary-color: #3498db;
}
body {
background-color: var(--main-bg-color);
color: var(--main-text-color);
}
a {
color: var(--primary-color);
}
a:hover {
color: darken(var(--primary-color), 10%);
}
<body>
<p>Ceci est un paragraphe.</p>
<a href="#">Ceci est un lien</a>
</body>
Explication :
- Dans cet exemple, trois variables sont définies :
--main-bg-color,--main-text-color, et--primary-color - Ces variables sont utilisées pour définir la couleur de fond, du texte et des liens
1.3 Modification des valeurs des variables en JavaScript
Dans cet exemple, les variables sont utilisées pour définir le thème de la page. En cliquant sur le bouton, les valeurs des variables changent, ce qui modifie le fond et la couleur du texte :
:root {
--main-bg-color: #f0f0f0;
--main-text-color: #333;
}
body {
background-color: var(--main-bg-color);
color: var(--main-text-color);
}
<button id="toggle-theme">Changer le thème</button>
<p>Ceci est un paragraphe.</p>
document.getElementById('toggle-theme').addEventListener('click', () => {
const root = document.documentElement;
if (root.style.getPropertyValue('--main-bg-color') === '#f0f0f0') {
root.style.setProperty('--main-bg-color', '#333');
root.style.setProperty('--main-text-color', '#f0f0f0');
} else {
root.style.setProperty('--main-bg-color', '#f0f0f0');
root.style.setProperty('--main-text-color', '#333');
}
});
GO TO FULL VERSION