CSS @property Rule

CSS @property Rule

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

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

定义自定义属性的实例：

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

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

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

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

Usage @property 的好处：

• 类型检查：Kailangan itakda ang uri ng datos ng pinagmulang katangian, tulad ng <number>、<color>、<length>. Ito ay nag-iwas sa mga pagkakamali at nagtuturing na ang tamang paggamit ng pinagmulang katangian.
• Pagtatakda ng pinagmulang halaga：Maaaring itakda ang pinagmulang halaga ng pinagmulang katangian. Ito ay nagtuturing na kung saan magamit ang browser ang pinagmulang pangalawang halaga kapag pinagmulang ang hindi wastong halaga sa hinaharap.
• Pagtatakda ng pag-aari：Kailangan itakda kung ang pinagmulang katangian ay pwedeng magsusuko ng halaga mula sa kanyang magulang na elemento.

Suporta ng browser

Ang mga numero sa talahanayan ay nangangahulugang ang unang bersyon ng browser na ganap na sumusuporta sa patakaran.

simple na instance ng @property

Sa nasabing halimbawa, nabuo ang dalawang pinagmulang katangian:--my-bg-color at --my-txt-color. Pagkatapos, ang div sa background-color at color Gamit ang pinagmulang katangian:

Example

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

Try It Yourself

instance ng @property

Sa nasabing halimbawa, gamit namin ang pinagmulang pinagmulang katangian sa <div> elemento. Pagkatapos, gamit namin ang ibang .fresh at .nature Tulad ng pagpapatupad ng pangalawang katangian ng klase (sa pamamagitan ng pagtatakda ng iba pang kulay), ang resulta ay napakagandang:

Example

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

Try It Yourself

Sa pamamagitan ng pagsubok at pangalawang halaga upang maiwasan ang mga pagkakamali

Sa nasabing halimbawa, aminin namin na gamitin ang halaga ng inherits .nature Ang pinagmulang katangian sa klase ay itinakdang bilang integer. Ito ay hindi wasto, ang browser ay gagamitin ang sa initial-value Pangalawang kulay na nakadefinir sa katangian (lightgray):

Example

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

Try It Yourself

sa halagang inherits

Sa nasabing halimbawa, aminin namin na gamitin ang halaga ng inherits inherits Ang itinakdang halaga ay falseIto ay nangangahulugang ang pinagmulang katangian ay hindi magsusuko ng halaga mula sa kanyang magulang na elemento. Tingnan ang resulta:

Example

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

Try It Yourself

Ang susunod na halimbawa ay inherits Ang itinakdang halaga ay trueIto ay nangangahulugang ang pinagmulang katangian ay magsusuko ng halaga mula sa kanyang magulang na elemento. Tingnan ang resulta:

Example

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

Try It Yourself

Use @property to create smooth animations

Usage @property New opportunities for implementing rules can be to animate content that was previously un-animated: gradients. See the following example:

Example

Specify two custom properties for gradients:

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

Try It Yourself

CSS @property Rule