Fonction CSS var()
Exemple
Tout d'abord, déclarez une variable globale nommée "--main-bg-color", puis utilisez la fonction var() pour insérer la valeur de la variable plus tard dans la feuille de style :
:root {
--main-bg-color: coral;
}
#div1 {
background-color: var(--main-bg-color);
}
#div2 {
background-color: var(--main-bg-color);
}
Plus d'exemples "Essayez-le vous-même" ci-dessous.
Définition et utilisation
La fonction var() permet d'insérer la valeur d'une variable CSS.
Version: | CSS3 |
---|
Prise en charge du navigateur
Les nombres dans le tableau indiquent la première version du navigateur qui prend entièrement en charge la fonction.
Function | |||||
---|---|---|---|---|---|
var() | 49.0 | 15.0 | 31.0 | 9.1 | 36.0 |
Syntaxe CSS
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) |
Plus d'exemples
Exemple
Un autre exemple qui utilise la fonction var() pour insérer plusieurs valeurs de variables CSS :
:root {
--main-bg-color: coral;
--main-txt-color: blue;
--main-padding: 15px;
}
#div1 {
background-color: var(--main-bg-color);
color: var(--main-txt-color);
padding: var(--main-padding);
}
#div2 {
background-color: var(--main-bg-color);
color: var(--main-txt-color);
padding: var(--main-padding);
}
Pages connexes
Tutoriel CSS : Variables CSS