Houdini是一组底层API，它们公开了CSS引擎的各个部分，从而使开发人员能够通过加入浏览器渲染引擎的样式和布局过程来扩展CSS. 它们使开发人员可以直接访问CSS对象模型（CSSOM），使开发人员可以编写浏览器可以解析为CSS的代码，从而创建新的CSS功能，而不必等待它们在浏览器中本地实现.
- CSS Parser API
- CSS Properties and Values API
- CSS Typed OM
- CSS Layout API
- CSS Painting API
- Worklets
CSS Properties and Values API
允许显式定义css变量、类型检查、继承和默认值
定义写法包含js与css两种方式
// Chromium 78
CSS.registerProperty({
name: '--colorPrimary',
syntax: '<color>',
initialValue: 'red',
inherits: false
})
/* Chromium 85 */
@property --colorPrimary {
syntax: '<color>';
initial-value: red;
inherits: false;
}
与更早的css变量api不同，此处的变量不再单纯被解析为字符串，它具有类型、初始值、继承状态
.card {
background-color: var(--colorPrimary); /* red */
}
.highlight-card {
--colorPrimary: yellow;
background-color: var(--colorPrimary); /* yellow */
}
.another-card {
--colorPrimary: 23;
background-color: var(--colorPrimary); /* red */
}
除了color，还支持多种类型，包括length、percentage、url、integer等等
<script>
if ('paintWorklet' in CSS && 'registerProperty' in CSS && 'CSSUnitValue' in window) {
CSS.registerProperty({
name: '--dot-spacing',
syntax: '<length>',
initialValue: '20px',
inherits: false
});
CSS.registerProperty({
name: '--dot-fade-offset',
syntax: '<percentage>',
initialValue: '0%',
inherits: false
});
CSS.registerProperty({
name: '--dot-color',
syntax: '<color>',
initialValue: '#fff',
inherits: false
});
} else {
document.querySelector('html').classList.add('no-support');
}
</script>
显式类型声明对于浏览器来说有许多好处，比如类型检查，比如在处理渐变的时候，浏览器能更好的识别数值型变量从而渲染渐变效果。
CSS Typed OM
CSS Typed OM API 允许将CSS值暴露为类型化的JavaScript对象。通常，css值可以以字符串形式在JavaScript中读取和写入，这可能很慢而且很麻烦。CSS类型对象模型API通过使用专用的JS对象来表示与基础值进行交互的接口，这些JS对象比字符串解析和连接更容易，更可靠地进行操作和理解。
computedStyleMap
computedStyleMap 可以获取对象CSS声明块的只读表示形式StylePropertyMapReadOnly
const el = document.querySelector('#id')
const defaultComputedStyles = el.computedStyleMap()
CSS Painting API
CSS Paint API 允许以编程方式定义图像并远程加载。
registerPaint('headerHighlight', class {
// 返回一个简单对象，描述上下文对象允许alpha透明
static get contextOptions() {
return { alpha: true };
}
// 引入至props
static get inputProperties() { return ['--boxColor', '--widthSubtractor']; }
paint(ctx, size, props) {
// ctx渲染上下文可以使用(大部分) Canvas API 进行绘制
ctx.fillStyle = 'hsla(55, 90%, 60%, 1.0)'
ctx.fillRect(0, 15, 200, 20)
// size对象包含.width和.height属性以访问元素的宽度和高度
ctx.fillRect( 0, size.height / 3, size.width * 0.4, size.height * 0.6 );
// props对象包含引入的css属性，需要使用inputProperties显式引入属性
ctx.fillStyle = props.get('--boxColor');
ctx.fillRect(0, size.height/3, size.width*0.4 - props.get('--widthSubtractor'), size.height*0.6);
}
})
通过CSS Paint API能够构建复杂的模块化css图形
CSS Houdini目前多数api仍处于实验性阶段，高版本chrome和Edge支持了部分特性，FireFox尚未支持，必要时可以使用support检查
