Fonction CSS var()
Exemple
Définissez un attribut nommé "--main-bg-color", puis utilisez la fonction var() pour appeler cet attribut :
:root {
--main-bg-color: coral;
}
#div1 {
background-color: var(--main-bg-color);
}
#div2 {
background-color: var(--main-bg-color);
}
Essayez-le vous-même »
Définition et utilisation
La fonction var() est utilisée pour insérer des valeurs de propriétés personnalisées. Cette méthode est utile si une valeur de propriété est utilisée à plusieurs endroits.
Version prise en charge : CSS3
Prise en charge des navigateurs
Les nombres dans le tableau indiquent le premier numéro de version de navigateur qui prend en charge cette fonction.
| Fonction | |||||
|---|---|---|---|---|---|
| var() | 49.0 | 15.0 | 31.0 | 9.1 | 36.0 |
Syntaxe CSS
var(custom-property-name, value)
| Valeur | Description |
|---|---|
| custom-property-name | Obligatoire. Le nom de la propriété personnalisée, qui doit commencer par --. |
| value | Facultatif. Une valeur de repli, utilisée lorsque la propriété n'existe pas. |
Plus d’exemples
Exemple
Utilisez la fonction var() pour appeler plusieurs valeurs personnalisées :
: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);
}
Essayez-le vous-même »
autres extensions