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

Una Kravets

发布时间：2024 年 7 月 12 日

准备好迎接 CSS 功能增强！作为 CSS Houdini API 伞状项目一部分的 @property 规则，现已在所有现代浏览器中获得全面支持。这项具有颠覆性意义的功能为 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 超能力正在不断增强。

延伸阅读