Variables CSS

Variables CSS

La fonction var() est utilisée pour insérer les valeurs des variables CSS.

Les variables CSS peuvent accéder au DOM, ce qui signifie que vous pouvez créer des variables à portée locale ou globale, modifier les variables à l'aide de JavaScript, et modifier les variables en fonction des queries media.

Une bonne méthode pour utiliser les variables CSS implique les couleurs de conception. Vous pouvez les placer dans des variables sans avoir à copier et coller les mêmes couleurs à chaque fois.

Méthode traditionnelle

L'exemple suivant montre la manière traditionnelle de définir certaines couleurs dans une feuille de style (en définissant la couleur à utiliser pour chaque élément spécifique) :

Exemple

body { background-color: #1e90ff; }
h2 { border-bottom: 2px solid #1e90ff; }
.container {
  color: #1e90ff;
  background-color: #ffffff;
  padding: 15px;
}
button {
  background-color: #ffffff;
  color: #1e90ff;
  border: 1px solid #1e90ff;
  padding: 5px;
}

Essayer personnellement

La syntaxe de la fonction var()

La fonction var() est utilisée pour insérer les valeurs des variables CSS.

La syntaxe de la fonction var() est la suivante :

var(name, value)
Valeur Description
name Obligatoire. Nom de la variable (commençant par deux tirets).
value Optionnel. Valeur de reprise (utilisée lorsque la variable n'est pas trouvée).

Remarque :Le nom de la variable doit commencer par deux tirets (--) et doit être sensible à la casse !

Comment fonctionne var()

Tout d'abord : les variables CSS peuvent avoir une portée globale ou locale.

Les variables globales peuvent être accédées / utilisées tout au long du document, tandis que les variables locales ne peuvent être utilisées qu'à l'intérieur du sélecteur où elles sont déclarées.

Pour créer une variable ayant une portée globale, déclarez-la dans le sélecteur :root. Le sélecteur :root correspond à l'élément racine du document.

Pour créer une variable ayant une portée locale, déclarez-la dans le sélecteur où vous allez l'utiliser.

Le exemple suivant est le même que celui ci-dessus, mais ici nous utilisons la fonction var() :

Tout d'abord, nous déclarons deux variables globales (--blue et --white). Ensuite, nous utilisons la fonction var() pour insérer les valeurs des variables plus tard dans la feuille de style :

Exemple

:root {
  --blue: #1e90ff;
  --white: #ffffff;
}
body { background-color: var(--blue); }
h2 { border-bottom: 2px solid var(--blue); }
.container {
  color: var(--blue);
  background-color: var(--white);
  padding: 15px;
}
button {
  background-color: var(--white);
  color: var(--blue);
  border: 1px solid var(--blue);
  padding: 5px;
}

Essayer personnellement

Les avantages d'utilisation de var() sont les suivants :

  • Facilite la lecture du code (plus facile à comprendre)
  • Facilite l'ajustement des valeurs de couleur

Si vous souhaitez changer le bleu et le blanc par des tons de bleu et de blanc plus doux, vous n'avez qu'à modifier les valeurs de deux variables :

Exemple

:root {
  --blue: #6495ed;
  --white: #faf0e6;
}
body { background-color: var(--blue); }
h2 { border-bottom: 2px solid var(--blue); }
.container {
  color: var(--blue);
  background-color: var(--white);
  padding: 15px;
}
button {
  background-color: var(--white);
  color: var(--blue);
  border: 1px solid var(--blue);
  padding: 5px;
}

Essayer personnellement

Prise en charge du navigateur

Les numéros dans le tableau indiquent la version du navigateur qui prend en charge pleinement cette propriété.

Fonction
var() 49.0 15.0 31.0 9.1 36.0

Fonction var() CSS

Fonction Description
var() Insérer la valeur de la variable CSS.