Une remarque ? Une suggestion ?...

Merci de participer à l'amélioration de ce site. Prenez le temps de rédiger votre remarque le plus précisément possible :

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 proposé pour 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 fonction var() peut être utilisée avec :

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

Syntaxe 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.

Compatibilité et prise en charge par les navigateurs.

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
Prise en charge générale des propriétés personnalisées (variables).
Colonne 2
Traitement de la fonction var() en CSS.
1
Variables
2
var()
Estimation de la prise en charge en pourcentage du parc actuel.
97%
96%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Androïd Brower

Baidu Browser

Chrome

Chrome pour Androïd

Edge

Firefox

Firefox pour Androïd

Internet Explorer

KaiOS Browser

Opéra

Opéra Mobile

QQ Browser

Safari

Safari sur IOS

Samsung Internet

Oméra mini