Règle @property de CSS

Définition et utilisation

CSS @property Les règles sont utilisées pour définir directement des attributs CSS personnalisés dans les feuilles de style, sans nécessiter l'exécution de JavaScript.

@property Les règles ont des fonctionnalités de vérification de type de données et de contraintes, peuvent définir des valeurs par défaut, et définir si l'attribut peut hériter de la valeur.

Utiliser @property Avantages :

• Vérification de type et contraintes : il est nécessaire de spécifier le type de données de l'attribut personnalisé, par exemple <number>、<color>、<length>等。Cela peut éviter les erreurs et garantir une utilisation correcte des attributs personnalisés.
• Définir la valeur par défaut : il est possible de définir une valeur par défaut pour l'attribut personnalisé. Cela garantit que si une valeur non valide est assignée ultérieurement, le navigateur utilisera la valeur de rechange définie.
• Définir le comportement d'héritage : il est nécessaire de spécifier si l'attribut personnalisé peut hériter de la valeur de son élément parent.

Exemple : définir des attributs personnalisés

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

La définition ci-dessus indique que --my-color est une propriété de couleur, qui peut hériter de la valeur de l'élément parent et a par défaut lightgray.

Utiliser des attributs personnalisés dans CSS :

body {}}
  backgound-color: var(--my-color);
}

Exemple

Exemple 1

Spécifiez deux attributs personnalisés pour le dégradé - et utilisez-les pour animer le 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

Exemple 2

Spécifiez deux attributs personnalisés : un pour la taille de l'élément et un pour la couleur de l'élément :

@property --item-size {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 50%;
}
@property --item-color {
  syntax: "<color>";
  inherits: false;
  initial-value: lightgray;
}

Essayez-le vous-même

Syntaxe CSS

@property --propertyname {
  syntax: "<color>";
  initial-value: red;
  inherits: false;
}

Valeur de l'attribut

Support du navigateur

Les nombres dans le tableau représentent la version du navigateur qui prend en charge pleinement cette règle @.

Pages liées

Tutoriel :Règle @property de CSS