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	85	85	128	16.4	71

简单的 @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）

示例

自己尝试 »

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

自己尝试 »