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>
Le nom d'une propriété personnalisée, représenté par un 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.
Candidat au statut de recommandation Définition initiale.

Compatibilité des navigateurs

Update compatibility data on GitHub
OrdinateurMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebview AndroidChrome pour AndroidEdge MobileFirefox pour AndroidOpera pour AndroidSafari pour iOSSamsung Internet
Support simple
Expérimentale
Chrome Support complet 49
Support complet 49
Support complet 48
Désactivée
Désactivée From version 48: this feature is behind the Enable experimental Web Platform features preference. To change preferences in Chrome, visit chrome://flags.
Edge Support complet 15Firefox Support complet 31
Support complet 31
Aucun support 29 — 55
Notes Désactivée
Notes From Firefox 29 until Firefox 31, this feature was implemented by the var-variablename syntax.
Désactivée From version 29 until version 55 (exclusive): this feature is behind the layout.css.variables.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE Aucun support NonOpera Support complet 36Safari Support complet OuiWebView Android Support complet 50Chrome Android ? Edge Mobile Support complet 15Firefox Android Support complet 31
Support complet 31
Aucun support 29 — 55
Notes Désactivée
Notes From Firefox 29 until Firefox 31, this feature was implemented by the var-variablename syntax.
Désactivée From version 29 until version 55 (exclusive): this feature is behind the layout.css.variables.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android Support complet 37Safari iOS Support complet OuiSamsung Internet Android ?

Légende

Support complet  
Support complet
Aucun support  
Aucun support
Compatibilité inconnue  
Compatibilité inconnue
Fonctionnalité expérimentale. Celle-ci peut être amenée à changer par la suite.
Fonctionnalité expérimentale. Celle-ci peut être amenée à changer par la suite.
Voir les notes d'implémentation.
Voir les notes d'implémentation.
Une action explicite de l'utilisateur est nécessaire pour activer cette fonctionnalité.
Une action explicite de l'utilisateur est nécessaire pour activer cette fonctionnalité.

Voir aussi

Étiquettes et contributeurs liés au document

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