Cette fonction est expérimentale
Puisque cette fonction est toujours en développement dans certains navigateurs, veuillez consulter le tableau de compatibilité pour les préfixes à utiliser selon les navigateurs.
Il convient de noter qu'une fonctionnalité expérimentale peut voir sa syntaxe ou son comportement modifié dans le futur en fonction des évolutions de la spécification.
La fonction var() peut être utilisée à la place d'une valeur pour n'importe quelle propriété d'un élément. La fonction var() ne peut pas être utilisée pour les noms de propriété, les sélecteurs et pour tout ce qui n'est pas une valeur de propriété.
Syntaxe
Le premier argument de la fonction est le nom de la propriété qu'on veut substituer. Le deuxième argument, optionnel, est une valeur de recours (fallback) qui est utilisée au cas où la valeur de subsitution référencée par la propriété est invalide.
var( <custom-property-name> [, <declaration-value> ]? )
Valeurs
<custom-property-name>- Tout identifiant valide qui commence par deux tirets. Les propriétés personnalisées sont uniquement utilisées par les auteurs et les utilisateurs. CSS ne définit pas leur valeur ou leur sémantique.
<declaration-value>- Une valeur de subsitution qui peut être utilisée afin que la règle soit valide si la valeur du premier argument ne peut être utilisée ici.
Exemples
:root{
--main-bg-color: pink;
}
body {
background-color: var(--main-bg-color);
}
/* On ajoute un paramètre de secours */
.component .header {
color: var(--header-color, blue);
}
.component .text {
color: var(--text-color, black);
}
Spécifications
| Spécification | État | Commentaires |
|---|---|---|
| CSS Custom Properties for Cascading Variables Module Level 1 La définition de 'var()' dans cette spécification. |
Version de travail | Définition initiale. |
Compatibilité des navigateurs
| Fonctionnalité | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
|---|---|---|---|---|---|
| Support simple | 48[2] 49 |
29 (29)[1] 31 (31) |
Pas de support | 36 | 9.3[3] |
| Fonctionnalité | Android | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|
| Support simple | 50 | 29 (29) | Pas de support | 37 | 9.3[3] |
[1] Cette fonctionnalité est implémentée avec la préférence layout.css.variables.enabled. Dans Gecko 29, par défaut, celle-ci vaut false et l'ancienne syntaxe var-nomdevariable est utilisée. À partir de Gecko 31, la préférence est activée par défaut et c'est donc la nouvelle syntaxe --nomdevariable qui est utilisée.
[2] Chrome 48 permet d'activer cette fonctionnalité grâce à la préférence « Activer les fonctionnalités expérimentales de Web Platform » dans chrome://flags.
[3] Voir WebKit bug 19660.