@property：新一代 CSS 变量现已支持通用浏览器

Una Kravets

发布时间：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 --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 超级功能的强大程度也越来越高。

附加阅读材料

• MDN 网页文档
• @property：为 CSS 变量赋予超级能力