Variables CSS - La fonction var()
Variables CSS
La var()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 conception. 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
body { background-color: #1e90ff; }
h2 { border-bottom: 2px solid #1e90ff; }
.container {
color:
#1e90ff;
background-color: #ffffff;
padding: 15px;
}
button {
background-color: #ffffff;
color: #1e90ff;
border: 1px
solid #1e90ff;
padding: 5px;
}
Syntaxe de la fonction var()
La var()fonction est utilisée pour insérer la valeur d'une variable CSS.
La syntaxe de la var()fonction est la suivante :
var(--name, value)
| Value | Description |
|---|---|
| name | Required. The variable name (must start with two dashes) |
| value | Optional. The fallback value (used if the variable is not found) |
Remarque : 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 :rootsélecteur 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 la var()fonction.
Tout d'abord, nous déclarons deux variables globales (--blue et --white). Ensuite, nous utilisons la
var()fonction pour insérer la valeur des variables plus tard dans la feuille de style :
Exemple
:root {
--blue: #1e90ff;
--white: #ffffff;
}
body { background-color: var(--blue); }
h2 { border-bottom: 2px solid var(--blue); }
.container {
color: var(--blue);
background-color: var(--white);
padding:
15px;
}
button {
background-color: var(--white);
color: var(--blue);
border: 1px solid var(--blue);
padding: 5px;
}
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
:root {
--blue: #6495ed;
--white: #faf0e6;
}
body { background-color: var(--blue); }
h2 { border-bottom: 2px solid var(--blue); }
.container {
color: var(--blue);
background-color: var(--white);
padding:
15px;
}
button {
background-color: var(--white);
color: var(--blue);
border: 1px solid var(--blue);
padding: 5px;
}
Prise en charge du navigateur
Les chiffres du tableau indiquent la première version du navigateur qui prend entièrement en charge la
var()fonction.
| Function | |||||
|---|---|---|---|---|---|
| var() | 49.0 | 15.0 | 31.0 | 9.1 | 36.0 |
Fonction CSS var()
| Property | Description |
|---|---|
| var() | Inserts the value of a CSS variable |