CSS @property 规则

CSS @property 规则

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

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

定义自定义属性的实例：

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

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

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

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

使用 @property 的好处：

• 类型检查：须指定自定义属性的数据类型，如 <number>、<color>、<length>。可防止错误并确保正确使用自定义属性
• 设置默认值：可以为自定义属性设置默认值。这确保了如果以后分配了无效值，浏览器将使用定义的备用值。
• 设置继承行为：必须指定自定义属性是否可以继承其父元素的值。

浏览器支持

表格中的数字表示完全支持该规则的第一个浏览器版本。

简单的 @property 实例

下例定义了两个自定义属性：--my-bg-color 和 --my-txt-color。然后，div 在 background-color 和 color 中使用自定义属性：

实例

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

亲自试一试

另一个 @property 实例

在下例中，我们在 <div> 元素上使用默认的自定义属性。然后我们在 .fresh 和 .nature 类中覆盖自定义属性（通过设置其他颜色），效果非常好：

实例

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

亲自试一试

通过类型检查和备用值避免错误

在下例中，我们将 .nature 类中的自定义属性设置为整数。这是无效的，浏览器将使用在 initial-value 属性中定义的备用颜色（lightgray）：

实例

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

亲自试一试

使用 inherits 值

在下例中，我们将 inherits 值设置为 false。这意味着自定义属性不会从其父元素继承值。查看结果：

实例

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

亲自试一试

下一个例子将 inherits 值设置为 true。这意味着自定义属性会从其父元素继承值。查看结果：

实例

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

亲自试一试

使用 @property 创建平滑动画

使用 @property 规则可以实现的全新机会是动画化以前无法动画化的内容：渐变。查看以下实例：

实例

为渐变指定两个自定义属性：

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

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

亲自试一试

CSS @property 规则