@property：为 CSS 变量赋予超能力

Una Kravets

CSS Houdini 是一个统称，涵盖一组低级 API，这些 API 会公开 CSS 渲染引擎的部分内容，并让开发者能够访问 CSS 对象模型。这对 CSS 生态系统来说是一个巨大的变化，因为它让开发者能够告知浏览器如何读取和解析自定义 CSS，而无需等待浏览器供应商提供对这些功能的内置支持。太棒了！

Houdini 为 CSS 带来的最令人兴奋的功能之一就是 Properties and Values API。

此 API 可为 CSS 自定义属性（也常称为 CSS 变量）赋予语义含义（由语法定义），甚至赋予回退值，从而增强 CSS 自定义属性的功能，并支持 CSS 测试。

编写 Houdini 自定义属性

下面是一个设置自定义属性（例如 CSS 变量）的示例，但现在添加了语法（类型）、初始值（回退）和继承布尔值（它是否从父级继承值？）。目前，此操作是通过 JavaScript 中的 CSS.registerProperty() 实现的，但在支持的浏览器中，您可以使用 @property：

单独的 JavaScript 文件 (Chromium 78)
CSS.registerProperty({
  name: '--colorPrimary',
  syntax: '<color>',
  initialValue: 'magenta',
  inherits: false
});
包含在 CSS 文件中 (Chromium 85)
@property --colorPrimary {
  syntax: '<color>';
  initial-value: magenta;
  inherits: false;
}

现在，您可以像访问任何其他 CSS 自定义属性一样，通过 var(--colorPrimary) 访问 --colorPrimary。不过，这里的区别在于，--colorPrimary 不只是作为字符串读取。里面有数据！

回退值

与任何其他自定义属性一样，您可以获取（使用 var）或设置（写入/重写）值，但对于 Houdini 自定义属性，如果您在替换时设置了 false 值，CSS 渲染引擎将发送初始值（其回退值），而不是忽略这行。

请参考以下示例。--colorPrimary 变量的 initial-value 为 magenta。但开发者为其赋予的值无效：“23”。如果没有 @property，CSS 解析器会忽略无效代码。现在，解析器会回退到 magenta。这样，您就可以在 CSS 中进行真正的回退和测试。太棒了！

.card {
  background-color: var(--colorPrimary); /* magenta */
}

.highlight-card {
  --colorPrimary: yellow;
  background-color: var(--colorPrimary); /* yellow */
}

.another-card {
  --colorPrimary: 23;
  background-color: var(--colorPrimary); /* magenta */
}

语法

借助语法功能，您现在可以通过指定类型来编写语义 CSS。目前允许的类型包括：

  • length
  • number
  • percentage
  • length-percentage
  • color
  • image
  • url
  • integer
  • angle
  • time
  • resolution
  • transform-list
  • transform-function
  • custom-ident（自定义标识符字符串）

设置语法后，浏览器便可对自定义属性进行类型检查。这样做有许多好处。

为了说明这一点，我将向您展示如何为渐变添加动画效果。目前，无法在梯度值之间平滑地添加动画（或插值），因为每个梯度声明都被解析为字符串。

使用采用“number”语法的自定义属性，左侧的渐变效果在停止值之间呈现平滑过渡。右侧的渐变使用默认自定义属性（未指定语法），并且显示了突然的过渡。

在此示例中，渐变停止百分比会通过悬停互动从 40% 的起始值动画化为 100% 的结束值。您应该会看到顶部渐变色的向下平滑过渡。

左侧的浏览器支持 Houdini Properties and Values API，可实现平滑的渐变停止点过渡。右侧的浏览器则不符合此要求。不支持该功能的浏览器只能将此更改理解为从 A 点到 B 点的字符串。没有机会对值进行插值，因此您无法实现这种平稳过渡。

不过，如果您在编写自定义属性时声明语法类型，然后使用这些自定义属性启用动画，则会看到过渡效果。您可以按如下所示实例化自定义属性 --gradPoint：

@property --gradPoint {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 40%;
}

然后，在动画播放时，您可以将值从初始 40% 更新为 100%：

.post:hover,
.post:focus {
  --gradPoint: 100%;
}

现在，系统将支持流畅的渐变过渡。

渐变边框的平滑过渡。在 Glitch 上查看演示

总结

@property 规则让您可以在 CSS 中编写具有语义意义的 CSS，从而让这项令人兴奋的技术变得更加易用。如需详细了解 CSS Houdini 和 Properties and Values API，请查看以下资源：

照片由 Cristian Escobar 拍摄，由 Un 创办方提供。