La fonction var() permet d'insérer la valeur d'un Variable CSS.
Les variables CSS ont accès au DOM, ce qui signifie que vous pouvez créer variables avec une portée locale ou globale, modifiez 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 de définir les couleurs de votre conception. Au lieu de copier et coller les mêmes couleurs encore et encore, vous pouvez placez-les dans des variables.
L'exemple suivant montre la manière traditionnelle de définir certaines couleurs dans une feuille de style (en définissant les couleurs à utiliser, pour chaque élément spécifique) :
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;
} Essayez-le vous-même →
<!DOCTYPE html>
<html>
<head>
<style>
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;
}
</style>
</head>
<body>
<h1>The Traditional Way</h1>
<div class="container">
<h2>Lorem Ipsum</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit.</p>
<p>
<button>Yes</button>
<button>No</button>
</p>
</div>
</body>
</html>
var()La fonction var() permet d'insérer la valeur d'un Variable CSS.
La syntaxe de la fonction var() est la suivante :
var(--name, value)Requis. Le nom de la variable (doit commencer par deux tirets)
Facultatif. La valeur de repli (utilisée si la variable n'est pas trouvée)
Remarque : Le nom de la variable doit commencer par deux tirets (--) et il est sensible à la casse !
var()Tout d'abord : les variables CSS peuvent avoir une portée globale ou locale.
Les variables globales sont accessibles/utilisées dans l'ensemble du document, tandis que les variables locales ne peuvent être utilisées que dans le 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 sélecteur :root correspond à l'élément racine du document.
Pour créer une variable à 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 fonction var().
Tout d’abord, nous déclarons deux variables globales (--blue et --white). Ensuite, nous utilisons le Fonction var() pour insérer la valeur des variables ultérieurement dans la feuille de style :
: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;
} Essayez-le vous-même →
<!DOCTYPE html>
<html>
<head>
<style>
: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;
}
</style>
</head>
<body>
<h1>Using the var() Function</h1>
<div class="container">
<h2>Lorem Ipsum</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit.</p>
<p>
<button>Yes</button>
<button>No</button>
</p>
</div>
</body>
</html>
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 pour modifier les deux valeurs des variables :
: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;
} Essayez-le vous-même →
<!DOCTYPE html>
<html>
<head>
<style>
: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;
}
</style>
</head>
<body>
<h1>Using the var() Function</h1>
<div class="container">
<h2>Lorem Ipsum</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit.</p>
<p>
<button>Yes</button>
<button>No</button>
</p>
</div>
</body>
</html>
Les numéros dans le tableau spécifient la première version du navigateur qui prend entièrement en charge le Fonction var().
| Function | |||||
|---|---|---|---|---|---|
| var() | 49.0 | 15.0 | 31.0 | 9.1 | 36.0 |
var()Insère la valeur d'une variable CSS