Règle @property CSS

Règle @property CSS

@property Rules are used to define custom CSS properties directly in the style sheet without running any JavaScript.

@property Rules have data type checking and constraints, set default values, and define whether the property can inherit values.

Define an instance of custom properties:

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

The above definition indicates --myColor It is a color property that can inherit the value of the parent element, with a default value of lightgray.

To use custom properties in CSS, we use var() Function:

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

Utilisation @property Advantages:

• Type checking：Il est nécessaire de spécifier le type de données de l'attribut personnalisé, comme <number>、<color>、<length>. Cela permet de prévenir les erreurs et d'assurer 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 invalide 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.

Prise en charge du navigateur

Les nombres dans le tableau représentent la première version de navigateur qui prend en charge cette règle en totalité.

Exemple simple @property

Dans cet exemple, deux attributs personnalisés sont définis :--my-bg-color et --my-txt-color. Ensuite, le div dans background-color et color Pour utiliser les attributs personnalisés :

Exemple

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

Essayer personnellement

une autre instance @property

Dans cet exemple, nous utilisons l'attribut personnalisé par défaut sur l'élément <div>. Ensuite, nous utilisons .fresh et .nature Cela fonctionne très bien pour couvrir les attributs personnalisés (en définissant une autre couleur) :

Exemple

@property --my-bg-color {
  syntaxe: "<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);
}

Essayer personnellement

Pour éviter les erreurs, vérifiez les types et les valeurs de rechange

Dans l'exemple suivant, nous allons .nature Les attributs personnalisés définis dans les classes sont des entiers. C'est invalide, le navigateur utilisera celui de initial-value Couleurs de rechange définies dans les attributs (lightgray) :

Exemple

@property --my-bg-color {
  syntaxe: "<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;
}

Essayer personnellement

utiliser la valeur inherits

Dans l'exemple suivant, nous allons inherits La valeur est définie sur falseCela signifie que les attributs personnalisés ne hériteront pas de la valeur de leur élément parent. Voir les résultats :

Exemple

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

Essayer personnellement

Le prochain exemple montrera inherits La valeur est définie sur trueCela signifie que les attributs personnalisés hériteront de la valeur de leur élément parent. Voir les résultats :

Exemple

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

Essayer personnellement

Créer des animations fluides avec @property

Utilisation @property Les nouvelles opportunités que peuvent offrir les règles sont l'animation de contenu qui ne pouvait pas être animé auparavant : la dégradation. Voir l'exemple suivant :

Exemple

Définir deux attributs personnalisés pour la dégradation :

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

Essayer personnellement

Règle @property CSS