Var() - Fonction CSS

var()

Résumé des caractéristiques de la fonction var()

Description rapide
Récupère la valeur d'une propriété personnalisée (variable).
Statut
Standard
Pourcentages
Ne s'appliquent pas.
Module W3C
Module CSS - Propriétés personnalisées (variables) - Niveau 1
Références (W3C)
Statut du document: CR (document candidat à la recommandation)

Description de la fonction var().

La fonction var() récupère la valeur d'une variable (on parle aussi de propriété personnalisée). Elle peut être utilisée à la place d'une valeur pour n'importe quelle propriété.

Le nom des variables commence obligatoirement par un double tiret (--). Le reste du nom peut être composé de lettres, de chiffres ou de tirets. Le nom des variables est sensible à la casse.

Les variables sont initialisées par la syntaxe ci-dessous. Leur portée est celle de l'élément défini par le sélecteur. Sur notre exemple, la variable sera disponible pour tous les éléments car elle est initialisée dans le sélecteur html.
Le sélecteur :root peut également être utilisé pour initialiser les variables globales.

html {--couleur-logo1 : #ff8045;}

La valeur de la variable ainsi créée peut être récupérée par la fonction var() de la façon suivante :

#id { background-color: var(--couleur-logo1, black); }

La valeur var() peut être utilisée avec les propriétés suivantes :

var() peut-être utilisée avec toutes les propriétés.

Syntaxes de la fonction var().

  • <propriété>: var(--x, 100px); n d

    n est le nom de la variable dont on veut récupérer la valeur. Ce nom doit forcément commencer par un double tiret (--).

    d est la valeur par défaut, qui sera utilisée si la variable spécifiée est introuvable : non initialisée ou initialisée mais avec une portée insuffisante.

    d peut être une valeur composée : plusieurs valeurs séparées par un espace ou par une virgule. Autrement dit, tout ce qui est compris après la première virgule et avant la parenthèse fermante est considéré comme la valeur par défaut. Les syntaxes suivantes sont donc valides :
    border: var(--bordure, double 3px red)
    font-family var(--police, arial, sans-serif)

    Particularité : la syntaxe var(--nom, ) est valide : elle signifie que la valeur par défaut est une valeur vide.

Exemples d'utilisation de la fonction var().

Dans les exemples ci-dessous, deux variables du même nom (--fond) sont définies, la première au niveau de l'élément racine html, et la deuxième au niveau du bloc #exemple1. Une troisième variable nommée --bk est définie au niveau du bloc #exemple1.

Exemple1 : utilisation d'une variable définie au niveau de l'élément lui-même. C'est un peu l'équivalent d'une variable locale en programmation. On constatera que la variable définie à un plus haut niveau est masquée par celle définie plus bas.
Exemple2 : utilisation d'une variable définie à un niveau plus élevé (ici le niveau html).
Exemple3 : utilisation d'une variable définie hors de portée. C'est la valeur par défaut indiquée dans la fonction var() qui est utilisée.

Support de la fonction var().

La fonction var() et plus généralement la gestion des variables (souvent dénommées propriétés personnalisées) est bien prise en charge par les navigateurs actuels.

Colonne 1
Support des propriétés personnalisés (variables) et de la fonction var() qui permet de retrouver leur valeur.
1
Variables
propriétés
personnalisaes
Estimation de la prise en charge globale.
96%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Internet Explorer

KaiOS Browser

Samsung Internet

Edge

Firefox

Androïd Brower

Chrome pour Androïd

Baidu Browser

QQ Browser

Safari

Safari sur IOS

Chrome

Opéra

Opéra Mobile

UC Browser pour Androïd

Firefox pour Androïd

Opéra mini

Voir le site Caniuse.com pour plus d'informations de compatibilité.
Caniuse

Historique de la fonction var().

Voir aussi...

La fonction var() est la seule définition du module CSS Custom Properties for Cascading Variables Module Level 1.