发布时间：2024 年 7 月 12 日
准备好提升 CSS 技能吧！@property 规则是 CSS Houdini 大伞下的 API 之一，现在所有现代浏览器都完全支持该规则。这项具有变革意义的功能可为 CSS 自定义属性（也称为 CSS 变量）带来前所未有的控制力和灵活性，让您的样式表更加智能、更加动态。
@property 的好处
- 语义含义：使用
@property为自定义属性定义类型（语法）。这会告知浏览器您的自定义属性包含哪些类型的数据（例如颜色、长度或数字），从而防止出现意外结果，并支持渐变动画等新功能。 - 回退值：不再出现样式消失的情况！使用
@property为自定义属性设置初始值。如果稍后分配了无效的值，浏览器会妥善使用您定义的回退。 - 改进了错误处理：增强的类型安全性和设置回退项的功能，让您可以在 CSS 中直接进行测试和验证。
创建高级自定义媒体资源
如需创建“标准”自定义属性，请设置以 -- 开头的属性名称，并为此属性指定值。浏览器会将这些自定义属性的值解析为字符串。
以下示例展示了如何初始化默认（基于字符串）自定义属性。
:root {
--myColor: hotpink;
}
如需获享这些“高级自定义属性”的好处（包括超出字符串的语义），请向 @property 注册您的 CSS 自定义属性。
在此示例中，使用 @property 初始化了相同的自定义属性。
@property --myColor {
syntax: '<color>';
inherits: false;
initial-value: hotpink;
}
使用 @property 初始化的自定义属性不仅提供名称和值，还提供更多详细信息。它包含语法类型，并将继承设置为 true 或 false。
这种方法的好处在于，使用标准属性时，您希望该属性包含颜色值，并打算在样式表的其他位置使用该颜色。如果有人将该属性更新为使用数字作为值，则在其他位置使用该属性的任何操作都会失败。使用 @property 时，系统会定义回退颜色，并声明 syntax 此属性必须包含颜色值。如果使用非颜色值，系统会改用回退值。
演示：闪烁的渐变背景
@property 的一个巧妙用途是，让之前无法进行转换的属性（例如浏览器会将其视为图片的渐变）实现流畅的动画效果。不过，如果您通过 @property 为变量赋予语法意义，则可以在梯度语句中使用这些变量。现在，您将描述渐变中两个声明值之间的动画，从而启用动画。下面是一个示例：一张卡片带有细微的背景动画，该动画由两个放射状渐变组成，这两个渐变在不同的时间轴上会发生颜色变化：
@property 为背景渐变的颜色添加动画效果。为实现这一点，您可以将自定义属性值设置为颜色：
@property --card-bg {
syntax: "<color>";
inherits: false;
initial-value: lavender;
}
@property --shine-1 {
syntax: "<color>";
inherits: false;
initial-value: wheat;
}
@property --shine-2 {
syntax: "<color>";
inherits: false;
initial-value: lightpink;
}
然后，您可以访问它们来创建初始渐变背景：
.card {
background: radial-gradient(
300px circle at 55% 60% in oklab,
var(--shine-2), transparent 100% 100%),
radial-gradient(farthest-side circle at 75% 30% in oklab,
var(--shine-1) 0%, var(--card-bg) 100%);
}
此外，您还需要更新关键帧中的值：
@keyframes animate-color-1 {
to {
--shine-1: orange;
}
}
@keyframes animate-color-2 {
to {
--shine-2: hotpink;
}
}
并为每个元素添加动画效果：
animation: animate-color-1 8s infinite linear alternate, animate-color-2 1s infinite linear alternate;
总结
CSS 注册的自定义属性是一项非常强大的功能，可通过为 CSS 变量提供含义和上下文来扩展 CSS 语言。现在，随着 @property 进入基准版，这项 CSS 超级功能的强大程度也越来越高。