Variables CSS – La fonction var()
Variables CSS
Le var() La fonction est utilisée pour insérer la valeur d’une variable CSS.
Les variables CSS ont accès au DOM, ce qui signifie que vous pouvez créer des variables avec une portée locale ou globale, modifier les variables avec JavaScript et modifier les variables en fonction des requêtes multimédias.
Une bonne façon d’utiliser les variables CSS est lorsqu’il s’agit des couleurs de votre design. Au lieu de copier et coller les mêmes couleurs encore et encore, vous pouvez les placer dans des variables.
La manière traditionnelle
L’exemple suivant montre la façon traditionnelle de définir certaines couleurs dans une feuille de style (en définissant les couleurs à utiliser, pour chaque élément spécifique) :
Exemple
corps { couleur de fond : #1e90ff ; }
h2 { border-bottom : 2px solid #1e90ff ; }
.récipient {
couleur : #1e90ff ;
couleur de fond : #ffffff ;
rembourrage : 15px ;
}
bouton {
couleur de fond : #ffffff ;
couleur : #1e90ff ;
bordure : 1px solide #1e90ff ;
rembourrage : 5px ;
}
Essayez-le vous-même »
Syntaxe de la fonction var()
Le var() La fonction est utilisée pour insérer la valeur d’une variable CSS.
La syntaxe de la var() fonction est la suivante :
| Valeur | Description |
|---|---|
| nom | Requis. Le nom de la variable (doit commencer par deux tirets) |
| valeur | Facultatif. La valeur de repli (utilisée si la variable n’est pas trouvée) |
Note: Le nom de la variable doit commencer par deux tirets (–) et il est sensible à la casse !
Comment fonctionne var()
Tout d’abord : les variables CSS peuvent avoir une portée globale ou locale.
Les variables globales sont accessibles/utilisées dans tout le document, tandis que les variables locales ne peuvent être utilisées qu’à l’intérieur du sélecteur où elles sont déclarées.
Pour créer une variable avec une portée globale, déclarez-la dans le :root
sélecteur. Le :root selector correspond à l’élément racine du document.
Pour créer une variable avec une portée locale, déclarez-la dans le sélecteur qui va l’utiliser.
L’exemple suivant est égal à l’exemple ci-dessus, mais ici nous utilisons le var() fonction.
Tout d’abord, nous déclarons deux variables globales (–blue et –white). Ensuite, on utilise le
var() fonction pour insérer la valeur des variables plus tard dans la feuille de style :
Exemple
:racine {
–bleu : #1e90ff ;
–blanc : #ffffff ;
}
corps { couleur d’arrière-plan : var (–bleu) ; }
h2 { border-bottom : 2px solid var(–blue); }
.récipient {
couleur : var(–bleu);
couleur de fond : var(–white);
rembourrage : 15px ;
}
bouton {
couleur de fond : var(–white);
couleur : var(–bleu);
bordure : 1px solide var(–blue) ;
rembourrage : 5px ;
}
Essayez-le vous-même »
Les avantages de l’utilisation de var() sont :
- rend le code plus facile à lire (plus compréhensible)
- facilite grandement la modification des valeurs de couleur
Pour changer la couleur bleu et blanc en un bleu et blanc plus doux, il vous suffit de changer les deux valeurs variables :
Exemple
:racine {
–bleu : #6495ed ;
–blanc : #faf0e6 ;
}
corps { couleur d’arrière-plan : var (–bleu) ; }
h2 { border-bottom : 2px solid var(–blue); }
.récipient {
couleur : var(–bleu);
couleur de fond : var(–white);
rembourrage : 15px ;
}
bouton {
couleur de fond : var(–white);
couleur : var(–bleu);
bordure : 1px solide var(–blue) ;
rembourrage : 5px ;
}
Essayez-le vous-même »
Prise en charge du navigateur
Les nombres dans le tableau indiquent la première version du navigateur qui prend entièrement en charge le
var() fonction.
| Fonction | |||||
|---|---|---|---|---|---|
| var() | 49,0 | 15,0 | 31,0 | 9.1 | 36,0 |
Fonction CSS var()
| Propriété | Description |
|---|---|
| var() | Insère la valeur d’une variable CSS |
#Variables #CSS #fonction #var