Règle CSS @property

La règle CSS @property

La @property est utilisée pour définir des propriétés CSS personnalisées (variables CSS) directement dans la feuille de style, sans avoir besoin d'exécuter du JavaScript.

La règle @property effectue une vérification et une contrainte de type de données, définit une valeur par défaut et spécifie le comportement d'héritage.

La définition ci-dessous crée une propriété personnalisée nommée --myColor, la définit comme une propriété de couleur, spécifie qu'elle héritera des valeurs de ses éléments parents, et sa valeur par défaut est lightgray.

Syntaxe de @property

 @property --myColor { 
 syntax: "<color>"; 
 inherits: true; 
 initial-value: lightgray; 
 } 

Utilisation de la propriété personnalisée

La fonction CSS var() est utilisée pour insérer la propriété personnalisée dans CSS :

 body { 
 background-color: var(--myColor); 
 } 

Avantages de l'utilisation de @property

Les avantages de l'utilisation de @property sont :

Vérification du type de données : Vous devez spécifier le type de données de la propriété personnalisée, tel que <number>, <color>, <length>, etc. Cela empêche les erreurs et garantit que les propriétés personnalisées sont utilisées correctement.
Définir une valeur par défaut : Vous devez définir une valeur par défaut pour la propriété personnalisée. Cela garantit que si une valeur invalide est assignée plus tard, le navigateur utilise la valeur par défaut comme solution de repli.
Définir le comportement d'héritage : Vous devez spécifier si la propriété personnalisée héritera des valeurs de ses éléments parents ou non. Cela garantit que vous aurez un contrôle total sur l'héritage.

Exemple CSS @property

L'exemple suivant définit deux propriétés personnalisées : my-bg-color et my-txt-color.

Le div utilise ensuite les propriétés personnalisées dans les propriétés background-color et color :

Exemple

 @property --my-bg-color { 
 syntax: "<color>"; 
 inherits: true; 
 initial-value: lightgray; 
 } 
 
 @property --my-txt-color { 
 syntax: "<color>"; 
 inherits: true; 
 initial-value: darkblue; 
 } 
 
 div { 
 width: 300px; 
 height: 150px; 
 padding: 15px; 
 background-color: var(--my-bg-color); 
 color: var(--my-txt-color); 
 } 

Essayez-le vous-même »

Un autre exemple @property

Dans l'exemple suivant, nous utilisons la propriété personnalisée par défaut sur l'élément <div>. Ensuite, nous remplaçons la propriété personnalisée dans la classe .fresh et la classe .nature (en définissant d'autres couleurs), et cela fonctionne parfaitement :

Exemple

 @property --my-bg-color { 
 syntax: "<color>"; 
 inherits: true; 
 initial-value: lightgray; 
 } 
 
 div { 
 width: 300px; 
 height: 150px; 
 padding: 15px; 
 background-color: var(--my-bg-color); 
 } 
 
 .fresh { 
 --my-bg-color: #ff6347; 
 } 
 
 .nature { 
 --my-bg-color: rgb(120, 180, 30); 
 } 

Essayez-le vous-même »

Éviter les erreurs avec la vérification de type et la valeur de repli

Dans l'exemple suivant, nous définissons la propriété personnalisée dans la classe .nature à un entier. Cela n'est pas valide, et le navigateur utilisera la couleur de repli, qui est définie dans la propriété initial-value (lightgray) :

Exemple

 @property --my-bg-color { 
 syntax: "<color>"; 
 inherits: true; 
 initial-value: lightgray; 
 } 
 
 div { 
 width: 300px; 
 height: 150px; 
 padding: 15px; 
 background-color: var(--my-bg-color); 
 } 
 
 .fresh { 
 --my-bg-color: #ff6347; 
 } 
 
 .nature { 
 --my-bg-color: 2; 
 } 

Essayez-le vous-même »

Utilisation de la valeur inherits

Dans l'exemple suivant, nous allons définir la valeur inherits à false. Cela signifie que la propriété personnalisée NE hérite PAS des valeurs de ses éléments parents. Regardez le résultat :

Exemple

 @property --my-bg-color { 
 syntax: "<color>"; 
 inherits: false; 
 initial-value: lightgray; 
 } 

Essayez-le vous-même »

L'exemple suivant définit la valeur inherits à true. Cela signifie que la propriété personnalisée VA hériter des valeurs de ses éléments parents. Regardez le résultat :

Exemple

 @property --my-bg-color { 
 syntax: "<color>"; 
 inherits: true; 
 initial-value: lightgray; 
 } 

Essayez-le vous-même »

Créer une animation fluide avec @property

Une toute nouvelle opportunité que vous pouvez réaliser avec la @property est d'animer quelque chose qui ne pouvait pas être animé auparavant : les dégradés. Regardez l'exemple suivant :

Exemple

Spécifiez deux propriétés personnalisées pour un dégradé :

 @property --startColor { 
 syntax: "<color>"; 
 initial-value: #EADEDB; 
 inherits: false; 
 } 
 
 @property --endColor { 
 syntax: "<color>"; 
 initial-value: #BC70A4; 
 inherits: false; 
 } 
 

Essayez-le vous-même »

Règle CSS @property

Propriété	Description
@property	Définir des propriétés CSS personnalisées directement dans la feuille de style sans avoir à exécuter de JavaScript.