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

Una Kravets

CSS Houdini 是一个总称，涵盖 一组低级 API，用于公开 CSS 渲染引擎的各个部分， 访问 CSS 对象模型这是一个 因为这能让开发者告诉浏览器 读取和解析自定义 CSS，而无需等待浏览器供应商提供 对这些功能的内置支持。太令人兴奋了！

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

此 API 可增强您的 CSS 自定义属性（通常也称为 CSS 变量）来为这些变量赋予语义含义（通过语法定义）， 后备值，以启用 CSS 测试。

编写 Houdini 自定义属性

这里是设置自定义属性的示例（假设：CSS 变量）， 包含语法（类型）、初始值（后备）和继承布尔值（ 它是否会从其父项继承该值？）。目前的实现方式是 通过 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 自定义属性（如果您设置了 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（自定义标识符字符串）

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

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

<ph type="x-smartling-placeholder">
</ph>
使用带“数字”的自定义属性语法，左侧的渐变效果呈现出平滑的 在停止值之间转换。右侧的渐变使用默认的自定义属性 （未定义语法）且显示突然的转场。

在此示例中，渐变停止百分比是从起点开始绘制的， 从 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%;
}

这样就可以实现平滑的渐变过渡。

<ph type="x-smartling-placeholder">
</ph>
让渐变边框平滑过渡。查看 Glitch 演示

总结

@property 规则使这项激动人心的技术更易于通过 可让您在 CSS 中编写语义上有意义的 CSS。学习内容 CSS Houdini 和 Properties and Values API 的更多信息，请查看 资源：

照片由 Cristian Escobar 提供，由 Un 创立网站提供。