---
title: var()
slug: Web/CSS/var()
tags:
  - CSS
  - Experimental
  - Fonction CSS
  - Reference
  - Variables CSS
translation_of: Web/CSS/var()
---
<div>{{CSSRef}}</div>

<p>La fonction <strong><code>var()</code></strong> 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'<a href="/fr/docs/Web/CSS/--*">une propriété personnalisée (custom property)</a>.</p>

<pre class="brush: css">var(--header-color, blue);</pre>

<p>La fonction <code>var()</code> 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é.</p>

<h2 id="Syntaxe">Syntaxe</h2>

<p>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 (<em>fallback</em>) qui est utilisée au cas où la valeur de subsitution référencée par la propriété est invalide.</p>

{{csssyntax}}

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

<h3 id="Valeurs">Valeurs</h3>

<dl>
 <dt><code>&lt;custom-property-name&gt;</code></dt>
 <dd>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.</dd>
 <dt><code>&lt;declaration-value&gt;</code></dt>
 <dd>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.</dd>
</dl>

<h2 id="Exemples​">Exemples​</h2>

<pre class="brush: css">:root{
  --main-bg-color: pink;
}

body {
  background-color: var(--main-bg-color);
}

</pre>

<pre class="brush: css">/* 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;
}</pre>

<h2 id="Spécifications">Spécifications</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Spécification</th>
   <th scope="col">État</th>
   <th scope="col">Commentaires</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('CSS3 Variables', '#using-variables', 'var()')}}</td>
   <td>{{Spec2('CSS3 Variables')}}</td>
   <td>Définition initiale.</td>
  </tr>
 </tbody>
</table>

<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>

<p>{{Compat("css.properties.custom-property.var")}}</p>

<h2 id="Voir_aussi">Voir aussi</h2>

<ul>
 <li>{{cssxref("env","env(…)")}} – variables d'environnement en lecture seule, contrôlées par l'agent utilisateur.</li>
 <li><a href="/fr/docs/Web/CSS/Utiliser_les_variables_CSS">Utiliser les variables CSS</a></li>
</ul>