Proprits personnalises pour les variables en cascade CSS

Le module des Proprits personnalises pour les variables en cascade CSS ajoute la prise en charge des variables en cascade dans les proprits CSS et vous permet de crer des proprits personnalises pour dfinir ces variables ainsi que les mcanismes pour utiliser les proprits personnalises comme valeurs pour d'autres proprits CSS.

Lorsque vous travaillez avec CSS, vous vous retrouvez souvent rutiliser des valeurs spcifiques un projet, telles que des largeurs qui fonctionnent bien avec votre mise en page, ou un ensemble de couleurs pour votre palette de couleurs. Une faon de grer la rptition dans les feuilles de style est de dfinir une valeur une fois et de l'utiliser plusieurs fois ailleurs. Les proprits personnalises vous permettent de crer et de dfinir des variables personnalises qui peuvent tre rutilises, simplifiant les rgles complexes ou rptitives et les rendant plus faciles lire et maintenir. Par exemple, --texte-gris-fonce et --fond-sombre sont plus faciles comprendre que des couleurs hexadcimales telles que #323831, et le contexte de leur utilisation est galement plus vident.

Proprits personnalises en action

Pour voir comment les proprits personnalises peuvent tre utilises, dplacez le curseur d'entre de gauche droite.

<div class="conteneur">
  <div id="couleur-1">--teinte</div>
  <div id="couleur-2">--teinte + 10</div>
  <div id="couleur-3">--teinte + 20</div>
  <div id="couleur-4">--teinte + 30</div>
  <div id="couleur-5">--teinte + 40</div>
  <div id="couleur-6">--teinte + 50</div>
  <div id="couleur-7">--teinte + 60</div>
  <div id="couleur-8">--teinte + 70</div>
</div>
<input type="range" min="0" max="360" value="0" step="0.1" id="teinte" />

const teinte = document.querySelector("#teinte");

const changerTeinte = () => {
  document.documentElement.style.setProperty("--teinte", teinte.value);
};

teinte.addEventListener("input", changerTeinte);

.conteneur {
  display: grid;
  font-family: sans-serif;
  color: white;
  gap: 0.5rem;
  grid-template-columns: repeat(4, 1fr);
  margin-bottom: 1rem;
}
.conteneur div {
  border-radius: 0.5rem;
  padding: 1rem;
}

input {
  width: 100%;
  margin: 0;
}

:root {
  --teinte: 0;
}

#couleur-1 {
  background-color: hsl(var(--teinte) 50% 50%);
}
#couleur-2 {
  background-color: hsl(calc(var(--teinte) + 10) 50% 50%);
}
#couleur-3 {
  background-color: hsl(calc(var(--teinte) + 20) 50% 50%);
}
#couleur-4 {
  background-color: hsl(calc(var(--teinte) + 30) 50% 50%);
}
#couleur-5 {
  background-color: hsl(calc(var(--teinte) + 40) 50% 50%);
}
#couleur-6 {
  background-color: hsl(calc(var(--teinte) + 50) 50% 50%);
}
#couleur-7 {
  background-color: hsl(calc(var(--teinte) + 60) 50% 50%);
}
#couleur-8 {
  background-color: hsl(calc(var(--teinte) + 70) 50% 50%);
}

Dans ces chantillons de couleurs, la couleur de fond (background-color) est dfinie en utilisant la fonction hsl() <color> comme hsl(var(--teinte) 50% 50%). Chaque chantillon de couleur incrmente la valeur de <hue> de 10 degrs comme calc(var(--teinte) + 10), calc(var(--teinte) + 20) etc. Lorsque la valeur du curseur change de 0 360, la valeur de la proprit personnalise --teinte est mise jour en utilisant calc(), et la couleur de fond de chaque bote l'intrieur de la grille est galement mise jour.

Rfrence

Proprits

--*

Fonctions

var()

Guides

Utiliser les proprits personnalises (variables) CSS: Explique comment utiliser les proprits personnalises en CSS et JavaScript, avec des conseils sur la gestion des valeurs indfinies et invalides, les valeurs de repli et l'hritage.
Proprits personnalises invalides: Explique comment les navigateurs grent les valeurs des proprits lorsque la valeur d'une proprit personnalise est d'un type de donnes invalide pour cette proprit.

Concepts associs

Le module de l'API de proprits et valeurs CSS
- La rgle@property
- La mthode CSS.registerProperty()

Spcifications

Spcification
CSS Custom Properties for Cascading Variables Module Level 1

Voir aussi

Le module de cascade et d'hritage CSS
La fonction env() CSS
La fonction calc() CSS
La mthode API getPropertyValue()

Aider amliorer MDN

Cette page vous a-t-elle t utile ?

Oui Non

Apprendre contribuer

Cette page a t modifie le 22 mai 2026 par les contributeurices du MDN.

Voir cette page sur GitHub Signaler un problme avec ce contenu