使用 @property 声明 CSS 自定义属性

Una Kravetz 深入探讨 了 Chrome 如何允许您直接从 CSS 声明 CSS 自定义属性，并提供比字符串更详细的信息。

所以，不再是像这样

html {
  --stop: 50%;
}

…而是可以像这样声明更多细节

@property --stop {
  syntax: "<percentage>";
  initial-value: 50%;
  inherits: false;
}

然后，浏览器就会知道这个特定的自定义属性是百分比而不是字符串。它可以是其他有用的东西，比如 <integer> 和 <color>。现在我们有了向浏览器传达此类信息的方法，我们就获得了一些新功能，比如能够在两个值之间进行过渡。

在玩耍的过程中，我注意到您必须 *非常明确地调用* 要过渡的属性（因为通用的 transition 不行）。尝试将鼠标悬停在这个演示上，它是 Una 在文章中所做的演示的重新创建。

请注意，我正在对颜色停止的位置（百分比）进行动画处理，但我也 *尝试* 对颜色进行动画处理，但这仍然不起作用。我以为使用这个新功能就可以实现。我知道人们对长期以来无法对渐变进行动画处理感到困惑。（参见 Ana Tudor 的文章。）

您始终可以在高级别重新声明属性，以“支持”无法读取自定义属性的浏览器。这感觉像是一个讨论这个话题的有趣时刻。Safari 似乎对这种基于 Houdini 的东西表现出浓厚的兴趣，但还没有实现。Firefox？嗯，我不知道。我们所知道的最佳情况是，他们在所有裁员之前将它标记为 “值得原型设计”。

这也有助于解决 CSS 自定义属性中奇怪的回退问题，我们在 时事通讯 中提到过。

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