var() - Fonction CSS
Résumé des caractéristiques de la 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 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
.
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.
var()
en CSS.
var()