@property：赋予 CSS 变量超能力

Una Kravets

CSS Houdini 是一个总括术语，涵盖了一组底层 API，这些 API 公开了 CSS 渲染引擎的各个部分，并使开发者可以访问 CSS 对象模型。这对 CSS 生态系统来说是一个巨大的变化，因为它使开发者无需等待浏览器厂商提供对这些功能的内置支持，即可告诉浏览器如何读取和解析自定义 CSS。真是太令人兴奋了！

在 Houdini 总括术语中，CSS 最令人兴奋的新增功能之一是 属性和值 API。

此 API 通过赋予 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 自定义属性一样访问 --colorPrimary，通过 var(--colorPrimary)。但是，这里的区别在于 --colorPrimary 不仅仅被读取为字符串。它具有数据！

回退值

与任何其他自定义属性一样，您可以使用 var 获取值或设置（写入/重写）值，但是对于 Houdini 自定义属性，如果您在覆盖它时设置了虚值，则 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 属性和值 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 以及属性和值 API 的更多信息，请查看以下资源

照片由 Cristian Escobar 在 Unsplash 上拍摄。