将@property用于CSS自定义属性

Chrome 现已支持使用 @property 声明 CSS 自定义属性，并提供比字符串更详尽的信息。这篇文章深入探讨了这一功能。

以往，CSS 自定义属性的声明方式如下：

html {
  --stop: 50%;
}

现在，我们可以使用 @property 提供更多细节：

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

浏览器现在知道这个自定义属性是一个百分比，而不是一个字符串。 其他有用的类型包括 <integer></integer> 和 <color></color>。 通过这种方式向浏览器传达信息，我们获得了新的能力，例如在两个值之间进行过渡。

然而，在实际应用中，需要注意的是，必须 明确指定 需要过渡的属性（简单的 transition 无法实现）。以下演示重现了 Una Kravetz 文章中的示例：

请注意，我正在动画化颜色停止点的位置（百分比），但我 也尝试 动画化颜色本身，但这仍然不起作用。我原本以为这个新特性可以实现这一点。长期以来，人们对无法动画化渐变感到困惑。（参见 Ana Tudor 的文章。）

对于不支持自定义属性的浏览器，我们可以在更高级别重新声明属性以提供支持。 这听起来有点滑稽。Safari 表明对这种基于 Houdini 的技术很感兴趣，但尚未支持。Firefox？情况不明朗，在裁员之前，他们将其标记为“值得原型设计”。

@property 也能解决 CSS 自定义属性的奇怪回退问题：

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

以上是将@property用于CSS自定义属性的详细内容。更多信息请关注PHP中文网其他相关文章！