Les variables CSS, également appelées propriétés personnalisées, vous aident à minimiser les répétitions dans vos feuilles de style. Cela vous permet d’économiser du temps et des efforts lorsque vous apportez des modifications à votre conception. Vous pouvez également être sûr de ne pas manquer les valeurs que vous devez mettre à jour.
L’accès au DOM vous permet de créer des variables, de les stocker et de les réutiliser dans votre feuille de style.
Comment définir et utiliser les variables CSS
Pour rendre vos feuilles de style plus organisées, plus faciles à maintenir et à réutiliser, vous pouvez utiliser des variables CSS dans toutes les propriétés qui acceptent une valeur.
Prenez l’exemple suivant d’un fichier HTML et d’un fichier CSS qui n’utilise pas de variables CSS.
HTML :
<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS Variables - Button Variations</title>
<link rel="stylesheet" href="Variables.css" />
</head>
<body>
<div>
<h1>CSS Variables</h1>
<div>
<button class="btn sub-primary">Primary</button>
<button class="btn">Secondary</button>
</div>
</div>
</body>
</html>
CSS :
.btn {
padding: 1rem 1.5rem;
background: transparent;
font-weight: 700;
color: red;
}
Voici à quoi devrait ressembler votre page :
Le site .btn utilisée dans la feuille de style ci-dessus n’est pas dynamique et vous oblige à créer une classe distincte pour personnaliser les boutons individuels. Pour créer de beaux sites Web, vous devez être dynamique dans votre style frontal. L’implémentation des boutons de cette manière rendra simplement cette tâche difficile.
Comme la plupart des langages de programmation, vous devez initialiser et substituer les variables CSS.
Pour initialiser une variable CSS, préfixez le nom de la variable par des doubles traits d’union :
:root{
/*CSS variable*/
--variable_name: value;
}
Vous pouvez initialiser une variable n’importe où, mais notez que vous ne pourrez utiliser cette variable qu’à l’intérieur du sélecteur initialisé. Pour cette raison, les variables CSS sont conventionnellement initialisées dans le sélecteur racine. Cela cible l’élément de plus haut niveau du DOM et permet aux variables d’être accessibles par l’ensemble du document HTML à l’échelle mondiale.
Pour substituer la variable dans votre style CSS, vous utiliserez la fonction var() propriété :
:root {
/*CSS variable*/
--primary: #900c3f;
--secondary: #ff5733;
}
.btn {
padding: 1rem 1.5rem;
background: transparent;
font-weight: 700;
color: var(--primary);
background-color: var(--secondary);
}
.sub-primary {
color: var(--secondary);
background-color: var(--primary);
}
Le sélecteur racine contient deux variables : –primaire et –secondaire. Les deux variables sont ensuite substituées dans le .btn comme une couleur et une couleur d’arrière-plan respectivement.
En utilisant les variables, vous pouvez styliser les éléments individuels beaucoup plus facilement. En réutilisant les variables, vous pouvez rapidement modifier une valeur une fois pour la mettre à jour dans chaque instance.
Le site var() Une propriété peut également prendre un second argument. Cet argument agit comme une valeur de repli pour le premier argument dans une situation où le premier n’est pas défini ou est invalide.
Par exemple :
:root {
--primary: #900c3f;
--secondary: #ff5733;
}
.btn {
padding: 1rem 1.5rem;
background: transparent;
font-weight: 700;
color: var(--primary, blue);
}
Dans cet exemple, remplacez le –primaire variable en couleur style. Si, pour une raison quelconque, cette valeur ne fonctionne pas, la feuille de style utilisera la deuxième valeur comme valeur de repli. Vous pouvez également utiliser une autre variable CSS comme valeur de repli.
Manipulation et remplacement des variables CSS avec JavaScript
La manipulation des variables CSS à l’aide de JavaScript peut être un moyen puissant de modifier l’aspect et la convivialité de votre site Web à la volée. En utilisant JavaScript, vous pouvez mettre à jour les valeurs de ces variables et voir les changements se refléter dans votre site.
Il est important de noter que les changements effectués avec JavaScript ne s’appliquent qu’à la session en cours. Vous devez soit mettre à jour la source originale, soit stocker la nouvelle valeur sur le client, comme dans un cookie, pour que les changements persistent.
Voici un exemple d’utilisation de JavaScript pour mettre à jour la valeur d’une variable CSS.
HTML :
<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS Variables - Button Variations</title>
<link rel="stylesheet" href="Variables.css" />
<script>
function changeColor() {
// Get the element you want to change the variable on
const myElement = document.querySelector(":root");
// Get the current value of the variable
let currentValue = getComputedStyle(myElement).getPropertyValue(
"--secondary"
);
// Set the new value for the variable
myElement.style.setProperty("--secondary"https://www.makeuseof.com/css-variables-how-use-pro/,"#DAF7A6");
}
</script>
</head>
<body>
<div>
<h1>CSS Variables</h1>
<div>
<button class="btn sub-primary" onclick="changeColor()">
Primary
</button>
<button class="btn">Secondary</button>
</div>
</div>
</body>
</html>
CSS :
:root {
--primary: #900c3f;
--secondary: #ff5733;
}
.btn {
padding: 1rem 1.5rem;
background: transparent;
font-weight: 700;
}
.sub-primary {
color: var(--primary);
background-color: var(--secondary);
}
Dans ce code JavaScript, l’élément changeColor() met à jour la couleur du premier bouton lorsque l’utilisateur clique dessus.
En utilisant les méthodes de traversée du DOM, vous pouvez accéder aux classes ou aux sélecteurs appliqués dans votre document HTML et manipuler les valeurs.
Avant de cliquer sur le bouton :
Après avoir cliqué sur le bouton :
Vous pouvez également utiliser JavaScript pour créer de nouvelles variables CSS ou les supprimer complètement.
Par exemple :
// Create a new variable
document.documentElement.style.setProperty('--new-color', 'blue');
// Remove a variable
document.documentElement.style.removeProperty('--new-color');
Utilisation des variables CSS avec les préprocesseurs
L’utilisation de variables dans la technologie frontale a été initialement réalisée avec des préprocesseurs CSS tels que SASS, LESS et Stylus.
L’objectif des préprocesseurs CSS est de développer du code qui étend les capacités fondamentales du CSS standard. Ensuite, ce code est compilé en CSS standard pour que le navigateur le comprenne, un peu comme TypeScript fonctionne avec JavaScript.
Avec le développement des variables CSS, les préprocesseurs ne sont plus aussi importants, mais ils peuvent encore offrir une certaine utilité s’ils sont combinés avec les variables CSS dans votre projet.
Vous pouvez définir une variable SASS $main-color et utilisez-la pour définir la valeur d’une variable CSS. Ensuite, utilisez la variable CSS dans une classe de style ordinaire.
Vous pouvez également utiliser les fonctions SASS pour manipuler les valeurs des variables CSS.
Par exemple :
:root {
--primary: $main-color;
--secondary: lighten(var(--primary), 20%);
}
.btn {
color: var(--primary);
background-color: var(--secondary);
}
Ici, la fonction SASS lighten() manipule la valeur de –primaire pour obtenir une valeur pour –secondaire.
Notez que les variables SASS ne sont pas accessibles par JavaScript. Par conséquent, si vous devez manipuler les valeurs de vos variables au moment de l’exécution, vous devez utiliser des variables CSS.
En utilisant les variables CSS et les préprocesseurs ensemble, vous pouvez profiter des deux avantages, comme l’utilisation des puissantes fonctionnalités des préprocesseurs, telles que les boucles et les fonctions, et des fonctionnalités des variables CSS, telles que le cascading CSS.
Conseils pour l’utilisation des variables CSS dans le développement Web
Voici quelques conseils importants à noter qui vous aideront à mieux utiliser les variables CSS.
Commencez par une convention de dénomination claire
Choisissez une convention de dénomination pour vos variables qui les rende faciles à comprendre et à utiliser. Par exemple, utilisez un préfixe tel que –couleur- pour les variables de couleur ou -Espaces- pour les variables d’espacement.
Utilisation de variables dans les requêtes média
Utilisez des variables dans les requêtes média pour faciliter l’adaptation de votre conception à différentes tailles d’écran.
Tirez parti de la nature en cascade de CSS
Rappelez-vous que les variables CSS sont en cascade, ce qui signifie que si vous définissez une variable sur un élément parent, elle affectera tous ses enfants.
Utilisez les variables CSS avec précaution
L’utilisation d’un trop grand nombre de variables CSS peut être source de confusion. Il convient donc de les utiliser avec prudence, et uniquement lorsque cela a un sens et améliore la maintenabilité de votre code.
Testez vos variables
Les variables CSS sont un moyen unique d’écrire un code clair et facile à maintenir dans votre feuille de style.
Il est important de noter qu’elles ne sont pas encore totalement prises en charge par tous les navigateurs. Vous devez donc tester la compatibilité de vos variables avec les navigateurs pour vous assurer qu’elles fonctionnent comme prévu et que les valeurs de repli fonctionnent comme vous le souhaitez.