Les variables CSS, également appelées propriétés personnalisées, vous aident à minimiser les répétitions dans vos feuilles de style. Ceci, à son tour, vous aide à économiser du temps et des efforts lorsque vous apportez des modifications à votre conception. Vous pouvez également être assuré que vous ne manquerez aucune valeur 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 des variables CSS
Pour rendre vos feuilles de style plus organisées, maintenables et réutilisables, vous pouvez utiliser des variables CSS dans n'importe quelle propriété qui accepte une valeur.
Prenons l'exemple suivant d'un fichier HTML et d'un fichier CSS qui n'utilisent pas de variables CSS.
HTML :
html>
<htmllangue="fr">
<diriger>
<titre>Variables CSS - Variations des boutonstitre>
<lienrel="feuille de style"href="Variables.css" />
diriger>
<corps>
<div>
<h1>Variables CSSh1>
<div>
CSS :
.btn {
rembourrage: 1Rem 1.5rem;
fond: transparent ;
poids de la police: 700 ;
La couleur rouge;
}
Voici à quoi votre page devrait ressembler :
Le .btn La classe 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. Créer de beaux sites Web nécessite que vous soyez dynamique avec votre style frontal. La mise en œuvre de boutons de cette manière rendra simplement cette tâche pénible à réaliser.
Comme la plupart des langages de programmation, vous devez initialiser et substituer des variables CSS.
Pour initialiser une variable CSS, préfixez le nom de la variable avec des doubles tirets :
:racine{
/*Variable CSS*/
--nom_variable: valeur ;
}
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é. De ce fait, les variables CSS sont classiquement initialisées à l'intérieur du 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 le var() propriété:
:racine {
/*Variable CSS*/
--primaire: #900c3f ;
--secondaire: #ff5733;
}.btn {
rembourrage: 1Rem 1.5rem;
fond: transparent ;
poids de la police: 700 ;
couleur: var(--primaire);
Couleur de l'arrière plan: var(--secondaire);
}
.sous-primaire {
couleur: var(--secondaire);
Couleur de l'arrière plan: var(--primaire);
}
Le sélecteur racine contient deux variables: --primaire et --secondaire. Les deux variables sont ensuite substituées dans le .btn classe comme couleur et couleur d'arrière-plan respectivement.
En utilisant les variables, vous pouvez styliser des éléments individuels beaucoup plus facilement. En réutilisant des variables, vous pouvez modifier rapidement une valeur une fois pour la mettre à jour dans chaque instance.
Le var() propriété peut également prendre un deuxième argument. Cet argument agit comme une valeur de secours pour le premier argument dans une situation où le premier n'est pas défini ou n'est pas valide.
Par exemple:
:racine {
--primaire: #900c3f ;
--secondaire: #ff5733;
}
.btn {
rembourrage: 1Rem 1.5rem;
fond: transparent ;
poids de la police: 700 ;
couleur: var(--primaire, bleu);
}
Dans cet exemple, remplacez le --primaire variable en couleur style. Si pour une raison quelconque, cette valeur échoue, la feuille de style utilisera la deuxième valeur comme solution de secours. Vous pouvez également utiliser une autre variable CSS comme valeur de secours.
Manipuler et remplacer des variables CSS avec JavaScript
La manipulation de variables CSS à l'aide de JavaScript peut être un moyen puissant de modifier l'apparence de votre site Web à la volée. En utilisant JavaScript, vous pouvez mettre à jour les valeurs de ces variables et voir les changements reflétés dans votre site.
Il est important de noter que les modifications apportées avec JavaScript ne s'appliqueront qu'à la session en cours. Vous devez soit mettre à jour la source d'origine, soit stocker la nouvelle valeur sur le client, comme dans un cookie, pour persister les changements.
Voici un exemple d'utilisation de JavaScript pour mettre à jour la valeur d'une variable CSS.
HTML :
html>
<htmllangue="fr">
<diriger>
<titre>Variables CSS - Variations des boutonstitre>
<lienrel="feuille de style"href="Variables.css" />
<scénario>
fonctionchanger de couleur() {
// Récupère l'élément sur lequel vous voulez changer la variable
constante monElément = document.querySelector(":racine");// Récupère la valeur courante de la variable
laisser valeuractuelle = getComputedStyle (monélément).getPropertyValue(
"--secondaire"
);
// Ensemble le nouveauvaleurpour le variable
monélément.style.setProperty("--secondaire", "#DAF7A6");
}
scénario>
diriger>
<corps>
<div>
<h1>Variables CSSh1>
<div>
CSS :
:racine {
--primaire: #900c3f ;
--secondaire: #ff5733;
}.btn {
rembourrage: 1Rem 1.5rem;
fond: transparent ;
poids de la police: 700 ;
}
.sous-primaire {
couleur: var(--primaire);
Couleur de l'arrière plan: var(--secondaire);
}
Dans ce code JavaScript, le changer de couleur() La fonction met à jour la couleur du premier bouton lorsque l'utilisateur clique dessus.
En utilisant Méthodes de parcours DOM, vous pouvez accéder aux classes ou 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:
// Créer un nouveauvariable
document.documentElement.style.setProperty('--nouvelle couleur', 'bleu');
// Supprimer une variable
document.documentElement.style.removeProperty('--nouvelle couleur');
Utilisation de variables CSS avec des préprocesseurs
L'utilisation de variables dans la technologie frontale a été initialement réalisée avec des préprocesseurs CSS tels que SASS, MOINS et Stylet.
Le but des préprocesseurs CSS est de développer du code qui étend les capacités fondamentales du CSS standard. Ensuite, faites compiler ce code en CSS standard pour que le navigateur le comprenne, un peu comme comment TypeScript fonctionne avec JavaScript.
Avec le développement des variables CSS, les préprocesseurs ne sont plus aussi importants, mais ils peuvent toujours offrir une certaine utilité s'ils sont combinés avec des variables CSS dans votre projet.
Vous pouvez définir une variable SASS $couleur-principale et utilisez-le pour définir la valeur d'une variable CSS. Ensuite, utilisez la variable CSS dans une classe de style standard.
Vous pouvez également utiliser les fonctions SASS pour manipuler les valeurs des variables CSS.
Par exemple:
:racine {
--primary: $couleur-principale ;
--secondaire: éclaircir(var(--primaire), 20%);
}
.btn {
couleur: var(--primaire);
Couleur de l'arrière plan: var(--secondaire);
}
Ici, la fonction SASS alléger() manipule la valeur de --primaire obtenir une valeur pour --secondaire.
Notez que les variables SASS ne sont pas accessibles par JavaScript. Donc, si vous avez besoin de manipuler les valeurs de vos variables lors de l'exécution, vous devez utiliser des variables CSS.
En utilisant ensemble des variables CSS et des préprocesseurs, vous pouvez profiter des deux avantages, comme l'utilisation puissantes fonctionnalités de préprocesseur comme les boucles et les fonctions et les variables CSS comme CSS en cascade.
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 avec une convention de nommage claire
Choisissez une convention de dénomination pour vos variables qui les rend faciles à comprendre et à utiliser. Par exemple, utilisez un préfixe tel que --couleur- pour les variables de couleur ou --espacement- pour les variables d'espacement.
Utilisez des variables dans les requêtes multimédias pour faciliter l'ajustement de votre conception à différentes tailles d'écran.
Tirez parti de la nature en cascade du CSS
N'oubliez pas que les variables CSS sont en cascade, ce qui signifie que si vous définissez une variable sur un élément parent, cela affectera tous ses enfants.
Utilisez les variables CSS avec prudence
L'utilisation d'un trop grand nombre de variables CSS peut être source de confusion, utilisez-les donc avec prudence et uniquement lorsque cela a du sens et améliore la maintenabilité de votre code.
Testez vos variables
Les variables CSS sont un moyen unique d'écrire du code clair et maintenable dans votre feuille de style.
Il est important de noter qu'ils ne sont toujours pas entièrement pris en charge sur tous les navigateurs. Par conséquent, vous devez tester la compatibilité de vos variables avec le navigateur pour vous assurer qu'elles fonctionnent comme prévu et que toutes les valeurs de secours fonctionnent comme prévu.
