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 :

CSS - Fonction var()

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 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 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 le point virgule est considéré comme la valeur par défaut. Les syntaxes suivantes sont donc valides :
    var(--cadre, double 3px red)
    var(--police, arial, sans-serif)

Exemples.

Cliquez sur les exemples pour afficher leur code CSS.

Utilisation d'une variable définie au niveau de l'élément html.
Utilisation d'une variable existante mais définie avec une porté n'englobant pas cet élément : c'est la valeur par défaut qui est utilisée, comme si la variable n'existait pas.

Compatibilité et prise en charge par les navigateurs.

La fonction var() et plus généralement la gestion des variables est bien prise en charge par les navigateurs actuels.

Afficher les versions antérieures   Afficher la version à venir