Propriétés personnalisées (--*)

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.

Les noms des propriétés qui sont préfixés par deux tirets : -- (par exemple : --nom-exemple) représentent des propriétés personnalisées (custom properties) qui peuvent contenir une valeur qui pourra être réutilisée dans le document grâce à la fonction var.

La portée des propriétés personnalisées est celle des éléments sur lesquels elles sont déclarées. Ces personnalisées contribuent à la cascade : la valeur utilisée d'une propriété personnalisée sera déterminée par l'algorithme de la cascade.

Valeur initiale	voir le texte
Applicabilité	tous les éléments
Héritée	oui
Valeur calculée	tel que spécifié avec les variables échangées
Type d'animation	discrète

Syntaxe

--unmotcle: left;
--unecouleur: #0000ff;
--unevaleurcomplexe: 3px 6px rgb(20, 32, 54);

<declaration-value>: Cette valeur correspond à une séquence de un ou plusieurs fragments tant que la séquence ne contient pas de fragments interdits. Elle représente l'intégralité de ce qu'une déclaration valide peut avoir comme valeur.

Syntaxe formelle

<declaration-value>

Exemples

HTML

<p id="premierParagraphe">Ce paragraphe devrait être sur fond bleu avec un texte jaune.</p>
<p id="secondParagraphe">Ce paragraphe devrait être sur fond jaune avec un texte bleu.</p>

CSS

:root {
  --premiere-couleur: #488cff;
  --seconde-couleur: #ffff8c;
}

#premierParagraphe {
  background-color: var(--premiere-couleur);
  color: var(--seconde-couleur);
}

#secondParagraphe {
  background-color: var(--seconde-couleur);
  color: var(--premiere-couleur);
}

Résultat

Spécifications

Spécification	État	Commentaires
CSS Custom Properties for Cascading Variables Module Level 1 La définition de '--*' dans cette spécification.	Candidat au statut de recommandation	Définition initiale.

Compatibilité des navigateurs

Update compatibility data on GitHub

	Ordinateur						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Webview Android	Chrome pour Android	Firefox pour Android	Opera pour Android	Safari sur iOS	Samsung Internet
--*	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 15	Firefox 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 Non	Opera Support complet 36	Safari Support complet 9.1	WebView Android Support complet 49	Chrome Android 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.	Firefox 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 36	Safari iOS Support complet 9.3	Samsung Internet Android Support complet 5.0
`env()` Expérimentale	Chrome Support complet 69	Edge Support complet 79	Firefox Support complet 65	IE Aucun support Non	Opera Support complet 56	Safari Support complet 11.1 Support complet 11.1 Aucun support 11 — 11.1 Autre nom Autre nom Cette fonctionnalité utilise le nom non-standard : `constant`	WebView Android Support complet 69	Chrome Android Support complet 69	Firefox Android Support complet 65	Opera Android Support complet 48	Safari iOS Support complet 11.3 Support complet 11.3 Aucun support 11 — 11.3 Autre nom Autre nom Cette fonctionnalité utilise le nom non-standard : `constant`	Samsung Internet Android Support complet 10.0
`var()`	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 15	Firefox Support complet 31 Support complet 31 Aucun support 29 — 55 Désactivée 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 Non	Opera Support complet 36	Safari Support complet 9.1	WebView Android Support complet 50	Chrome Android 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.	Firefox Android Support complet 31 Support complet 31 Aucun support 29 — 55 Désactivée 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 36	Safari iOS Support complet 9.3	Samsung Internet Android Support complet 5.0

Légende

Support complet: Support complet
Aucun support: Aucun support
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é.
Cette fonctionnalité utilise un nom non-standard.: Cette fonctionnalité utilise un nom non-standard.

Voir aussi

Utiliser les variables CSS