CSS Houdini
CSS Houdini 是一组公开 CSS 引擎部分功能的 API。这使得开发者能够更轻松地为 CSS 创建扩展。这些扩展可以用于实现浏览器中尚不可用的功能的 Polyfill，尝试新的布局方式，或者添加创意边框或其他效果。
虽然许多 Houdini 示例展示了这些 API 的创意可能性，但它也有许多实际的用例。例如，你可以使用 Houdini 创建带有类型检查和默认值的高级自定义属性。
基本示例
常规的 CSS 自定义属性由属性名和值组成。因此，我可能会创建一个名为 --background-color 的自定义属性，并期望它被赋予一个颜色值。然后该值在 CSS 中就像颜色值一样被使用。
:root {
--background-color: blue;
}
.box {
background-color: var(--background-color);
}
然而在上面的例子中，没有什么可以阻止有人为这个属性使用其他值，也许将其设置为长度。一旦这样做，任何使用该属性的地方都不会有背景颜色，因为 background-color: 12px 是无效的。当浏览器遇到它们不认为是有效的 CSS 时，它们会忽略那一行。
然而，使用 @property，我们可以声明一个具有 <color> syntax 的自定义属性。这表明我们需要此属性的值是一个有效的颜色。
@property --background-color {
syntax: "<color>";
inherits: false;
initial-value: blue;
}
Houdini Worklet
Houdini 的一个特性是 Worklet。Worklet 是一个用 JavaScript 编写的模块，它使用 Houdini API 之一来扩展 CSS。你可以在 PaintWorkletGlobalScope.registerPaint() 页面上看到一个 worklet 示例。一旦 worklet 被注册，你就可以像使用任何其他值一样在 CSS 中使用它。这意味着即使你不是 JavaScript 开发者，你也可以通过使用其他人创建的 worklet 来访问 Houdini API。
参考
CSS @规则和描述符
@property @规则允许你注册一个高级自定义属性。