CSS Houdini

定义

CSS Houdini 是 W3C 与浏览器厂商合作制定的一组底层 API 的统称，目标是开放渲染引擎内部环节，让 CSS 特性可被自定义与 polyfill，而不必等待原生实现。

主要组成

• Paint API：用 JavaScript 注册自定义绘制逻辑，作为 background-image 等属性的值使用；
• Properties and Values API（@property）：为自定义属性注册类型、初始值与继承行为，使其可动画化；
• Typed OM：以类型化对象而非字符串读写 CSS 值，性能与易用性更佳；
• Layout API 与 Animation Worklet：自定义布局算法与在独立线程运行的动画（各浏览器实现进度不一）。

意义

Houdini 被视为「CSS 的可扩展化」尝试：以往只能靠预处理器在编译期模拟的能力，得以进入浏览器运行时。其中 @property 与 Paint API 已在主流 Chromium 系浏览器可用，常用于实现渐变动画、自定义边框等效果。