Imaginons que vous ayez créé des styles initiaux pour votre site et que vous vous soyez rendu compte que vous répétiez certaines valeurs dans votre CSS. Vous utilisez dodgerblue comme couleur principale et vous l'ajoutez aux bordures des boutons, au texte des liens et aux arrière-plans des en-têtes. Vous utilisez également un outil de conception pour choisir des variantes de ce bleu pour d'autres éléments du site. Vous obtenez ensuite un guide de style, et la couleur primaire est désormais oklch(70% 0.15 270).
Les propriétés personnalisées, ou variables CSS, vous permettent d'organiser et de réutiliser des valeurs dans votre CSS, afin que vos styles soient plus flexibles et plus faciles à comprendre.
Créer des propriétés
Le moyen le plus simple de créer une propriété consiste à définir une valeur sur une nouvelle propriété avec un nom que vous définissez.
.card {
--base-size: 1em;
}
Tous les noms de propriétés doivent commencer par deux tirets. Cela vous empêche d'essayer d'utiliser un nom de propriété CSS existant pour une valeur personnalisée. La spécification CSS n'ajoutera jamais de propriété commençant par deux tirets.
Cette propriété est ensuite accessible avec la fonction var(). Cet exemple définit la taille de la police dans un .card-title sur le double de la valeur --base-size.
.card .card-title {
font-size: calc(2 * var(--base-size));
}
Utiliser une propriété personnalisée
Comme vous l'avez vu, vous pouvez utiliser la valeur d'une propriété personnalisée avec la fonction var(). Vous pouvez utiliser la fonction var() dans les valeurs, mais pas dans les requêtes média. Elles sont particulièrement utiles comme arguments pour d'autres fonctions CSS.
Créations de remplacement
Que se passe-t-il si vous essayez d'utiliser une propriété personnalisée dont la valeur n'est pas définie ? La fonction var() prend une deuxième valeur qui sera utilisée comme valeur de remplacement. La valeur de remplacement peut même être une autre propriété personnalisée avec un var() imbriqué.
#my-element {
background: var(
--alert-variant-background,
var(--alert-primary-background)
);
}
Valeurs non valides
Si une propriété personnalisée est résolue avec une valeur non valide (par exemple, une valeur 1em pour la propriété background-color), les autres déclarations valides de cet élément pour cette propriété ne seront pas utilisées. En effet, le navigateur ne peut pas savoir si une valeur est incorrecte tant qu'il n'a pas supprimé les autres déclarations lors du calcul d'une valeur. La valeur utilisée sera alors une valeur héritée ou initiale.
.content {
background-color: blue;
}
.content.invalid {
--length: 2rem;
background-color: var(--length);
}
Dans l'exemple précédent, l'élément .invalid n'aura pas de fond bleu. En revanche, comme background-color n'hérite pas, la valeur sera transparent, qui est sa valeur initiale.
Remplacements et héritage
La plupart du temps, vous souhaiterez le comportement par défaut des propriétés personnalisées, à savoir que les valeurs sont héritées. Lorsque vous définissez une nouvelle valeur pour une propriété, cet élément et tous ses enfants auront cette valeur, jusqu'à ce qu'elle soit remplacée par une autre valeur.
Les propriétés personnalisées sont déterminées par la cascade. Elles peuvent donc également être remplacées par un sélecteur plus spécifique.
Plus de contrôle avec @property
Une propriété personnalisée créée en définissant une valeur peut être de n'importe quel type et hérite. Pour mieux contrôler une propriété personnalisée, vous pouvez utiliser la règle @property.
La propriété --base-size que nous avons créée précédemment équivaudrait à cette déclaration @property.
@property --base-size {
syntax: "*";
inherits: true;
initial-value: 18px;
}
La valeur syntax définit les types de valeurs CSS valides pour la propriété. Si vous définissez un type différent pour cette propriété, elle ne sera pas valide et reviendra à la valeur initiale ou à une valeur héritée définie plus haut dans la cascade.
Lorsque vous créez une propriété personnalisée à l'aide de @property, vous pouvez désactiver l'héritage avec inherit: false. Si vous remplacez la valeur d'une propriété personnalisée dont l'héritage est désactivé, elle sera modifiée pour l'élément sélectionné, mais pas pour ses enfants. Cela s'avère souvent utile lorsque plusieurs sélecteurs ciblent le même élément.
initial-value définit la valeur de la propriété, sauf si elle est modifiée ultérieurement. Sauf si la syntaxe est *, ce qui signifie n'importe quel type CSS, le @property doit définir un initial-value. Cela garantit que la propriété aura toujours une valeur correspondant à la syntaxe spécifiée et ne sera jamais indéfinie.
Mettre à jour les propriétés personnalisées avec JavaScript
La valeur d'une propriété personnalisée sur un élément peut être mise à jour à l'aide de JavaScript, que vous pouvez utiliser pour mettre à jour les styles de votre site de manière dynamique.
const element = document.getElementById("my-button");
getComputedStyle(element).setPropertyValue("--color", orange);
Cet exemple met à jour la balise de style sur l'élément #my-button. L'inspection dans les outils de développement montre ce qui suit :
<button id="my-button" style="--color: orange">Click me</button>
Dans l'exemple précédent, vous pouvez voir comment définir des propriétés personnalisées en accédant aux données stockées dans des attributs HTML personnalisés. Chaque bouton possède un attribut data-color avec une valeur de couleur spécifique. La propriété personnalisée --background définie sur l'élément body est réinitialisée sur la valeur data-color, quel que soit le bouton sur lequel l'utilisateur clique.
Vous pouvez également utiliser getComputedStyle(element).getPropertyValue("--variable") pour obtenir la valeur d'une propriété sur un élément spécifique. Cela peut être utile si votre logique doit répondre à une valeur en cascade.