La fonction var() peut être utilisée à la place d'une valeur pour n'importe quelle propriété d'un élément. Elle permet d'insérer la valeur d'une propriété personnalisée (custom property).

var(--header-color, blue);

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> ]? )

Note : La syntaxe de la valeur de recours permet d'utiliser des virgules. Aussi, si on a var(--toto, red, blue), la valeur de recours sera bien red, blue (autrement dit, tout ce qui est situé après la première virgule sert de valeur de recours).

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); // à ce moment header-color n'est pas définie, c'est donc le bleu qui est utilisé
}
.component .text {
  color: var(--text-color, black);
}

.component {
  --text-color: #080;
}

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 Edge Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Support simple 48[1]
49
15063[2] 29 (29)[3]
31 (31)
Pas de support 36 9.3[4]
Fonctionnalité Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Support simple 50 29 (29) Pas de support 37 9.3[3]

[1] 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.

[2] Cf. le statut de la plate-forme Edge et les notes de versions de la build 15063 (20 mars 2017).

[3] 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. À partir de Gecko 55, la préférence layout.css.variables.enabled a complètement été retirée, la fonctionnalité est donc nécessairement activée.

[4] Voir WebKit bug 19660.

Voir aussi

Étiquettes et contributeurs liés au document

 Contributeurs à cette page : SphinxKnight
 Dernière mise à jour par : SphinxKnight,