CSS Houdini 这个看起来像拼音的单词和 CSS 有什么联系？

今天第一次看到 CSS Houdini 这个词语觉得有点怪，还以为是什么的中文拼音，但好像又和 CSS 有些关联。结果一查，还真和 CSS 密切相关。MDN 中的解释是：

CSS Houdini 是 CSS 引擎暴露对外的一组 API，由此可使得开发者很轻松地为 CSS 创建拓展。这些拓展可用于填充浏览器中尚不可用的功能，尝试新的布局方式，或添加创意边框或其他效果。

到目前为止，JS 只能改变浏览器渲染过程中的 DOM 和 CSSOM，而无法去改变后面 layout、 painting 和 composite 的进程。这样当 CSS 新技术出现的时候，开发者就只能眼睁睁的看着老浏览器不支持而无能为力了，因为浏览器并没有提供相应的接口让开发人员去进行 polyfills。有了 CSS Houdini 就能把整个渲染过程都打通，让 JS 参与进来。我们就可以放心地使用新的 CSS 技术而不用担心浏览器的兼容问题。

比如可以增加带有默认值的高级自定义属性。

:root {
  --background-color: blue;
}

.box {
  background-color: var(--background-color);
}

以上我们就是增加了一个名为 --background-color 的属性，并且给了它默认的颜色值。然后我们就可以在其他地方来引用值以属性的方式。

@property --background-color {
  syntax: '<color>';
  inherits: false;
  initial-value: blue;
}

为了防止别人滥用这个只属于颜色的属性，我们可以通过 @property 给它增加类型约束。

Houdini.how 这个网站收集了 Houdini 的使用案例。