@property

Definition

Règle at qui enregistre une custom property avec un type, une valeur initiale et un comportement d'héritage. Permet d'animer des variables CSS et d'ajouter une validation de type.

Analogie

Comme déclarer le type d'une variable en TypeScript : on précise ce qu'elle peut contenir et sa valeur par défaut.

Exemple de code

@property --hue {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}
.element {
  --hue: 0deg;
  background: hsl(var(--hue) 80% 50%);
  transition: --hue 0.5s;
}
.element:hover { --hue: 120deg; }

Cas d'usage

Animer des dégradés ou des couleurs via des transitions sur des custom properties typées.

Termes lies