CSS évolue avec le temps et de nouvelles fonctionnalités y sont ajoutées, ce qui facilite la mise en œuvre des fonctionnalités les plus couramment utilisées. Aujourd'hui, nous verrons une fois une telle fonctionnalité qui rend le CSS encore plus puissant.

La @property (at-rule) permet aux développeurs de définir des propriétés personnalisées. Dans cet article, nous verrons ce qu'est @property, pourquoi il est utile et comment l'utiliser avec quelques exemples pratiques.

Qu'est-ce que la règle At de @property ?

Les propriétés personnalisées CSS (variables) existent depuis un certain temps et elles vous permettent de stocker et de réutiliser des valeurs telles que les couleurs, les tailles de police ou toute autre valeur de style. Cependant, jusqu'à récemment, ils manquaient de fonctionnalités avancées telles que la définition de types et de valeurs par défaut. Ceci est particulièrement utile si nous souhaitons implémenter des animations complexes (plus d'informations à ce sujet dans les prochains articles).

La règle @property représente un enregistrement de propriété personnalisée directement dans la feuille de style sans avoir à exécuter de js.

Syntaxe de base

@property --my-custom-property {
  syntax: "";
  inherits: false;
  initial-value: red;
}

• syntaxe : définit le type de données attendu de la propriété. Dans ce cas, il s'agit d'une couleur (), mais il peut s'agir de n'importe quel type de données CSS valide comme , ou .
• hérite : détermine si la valeur de la propriété doit être héritée par les éléments enfants. Il peut être défini sur vrai ou faux.
• valeur initiale : définit une valeur par défaut pour la propriété lorsqu'aucune n'est fournie.

Quand utiliser @property

• Lorsque vous devez animer ou effectuer la transition d'une propriété personnalisée pour garantir un comportement fluide.
• Pour appliquer des types de données (comme les couleurs, les longueurs ou les nombres) afin d'éviter les bogues dus à des valeurs non valides.
• Pour définir des valeurs par défaut pour les propriétés personnalisées afin de conserver des styles cohérents lorsque des valeurs sont manquantes.
• Contrôlez l'héritage des propriétés personnalisées entre les éléments parents et enfants.

En savoir plus

• Documents MDN @property

Message original