Regola @property CSS

Regola @property CSS

@property 规则用于直接在样式表中定义自定义 CSS 属性，而无需运行任何 JavaScript。

@property 规则具有数据类型检查和约束、设置默认值，并定义属性是否可以继承值。

定义自定义属性的实例：

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

上面的定义表示 --myColor 是一个颜色属性，它可以继承父元素的值，其默认值为 lightgray。

要在 CSS 中使用自定义属性，我们使用 var() 函数：

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

Utilizzo @property 的好处：

• 类型检查：Deve essere specificato il tipo di dati dell'attributo personalizzato, come <number>、<color>、<length>. Questo previene gli errori e garantisce l'uso corretto degli attributi personalizzati
• Impostazione del valore predefinito：Può impostare un valore predefinito per l'attributo personalizzato. Questo garantisce che se in futuro viene assegnato un valore non valido, il browser utilizzerà il valore di riserva definito.
• Impostazione del comportamento di ereditarietà：Deve essere specificato se l'attributo personalizzato può erediterà il valore dell'elemento padre.

Supporto del browser

I numeri nella tabella rappresentano la versione del browser che supporta completamente la regola.

un esempio semplice di @property

L'esempio seguente definisce due attributi personalizzati:--my-bg-color e --my-txt-color. Quindi, il div in background-color e color usiamo l'attributo personalizzato:

Esempio

@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);
}

Prova personalmente

un'altra istanza @property

Nel seguente esempio, utilizzeremo l'attributo personalizzato predefinito sul elemento <div>. Poi, nel .fresh e .nature Per coprire l'attributo personalizzato nella classe (impostando un altro colore), l'effetto è molto buono:

Esempio

@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);
}

Prova personalmente

per evitare errori attraverso il controllo del tipo e i valori di riserva

Nel seguente esempio, utilizzeremo il valore .nature L'attributo personalizzato nella classe è impostato come intero. Questo è non valido, il browser utilizzerà il valore initial-value Colore di riserva definito nell'attributo (lightgray):

Esempio

@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;
}

Prova personalmente

inherits

Nel seguente esempio, utilizzeremo il valore inherits Il valore impostato è falseQuesto significa che l'attributo personalizzato non erediterà il valore dal suo elemento padre. Vedi i risultati:

Esempio

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

Prova personalmente

L'esempio seguente mostrerà: inherits Il valore impostato è trueQuesto significa che l'attributo personalizzato erediterà il valore dal suo elemento padre. Vedi i risultati:

Esempio

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

Prova personalmente

Creare animazioni fluide con @property

Utilizzo @property Le nuove opportunità che possono essere realizzate con le regole sono l'animazione di contenuti che prima non potevano essere animati: le progressioni. Vedi l'esempio seguente:

Esempio

Specificare due proprietà personalizzate per la progressione:

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

Prova personalmente

Regola @property CSS