CSS Houdini 通览

本文作者：IMWeb went 原文出处：IMWeb社区 未经同意，禁止转载

简介

Houdini是一个国际逃脱艺术家，通常使用各种玄幻的方式打破观众的想象，收获到各种惊叹。

而在 W3C 中 Houdini 是 W3C 成立的一个任务小组，Houdini 主要的工作任务是把开放的CSS API 提供给开发者，开发者可以在通过在浏览器渲染的各个阶段控制该时间节点的工作内容来实现对CSS进行编程，也意在提供玄幻、充满着各种无限可能的CSS实现方式。

Houdini 主要由Typed OM、Properties/Values、Worklets、Parser API、Paint API、Layout API组成，下面会进行简单的介绍。

Typed OM

Typed OM 全称是 Typed Object Model 类型对象模型。他可以给 我们取到的CSS 值添加一些类型、方法和新的对象模型来进一步扩展CSS值的易用性和可读性。

这时候我们取到的CSS的值不再是字符串了，现在我们取到的值是JavaScript里的一个对象，可以更加符合我们JavaScript编程的习惯，我们也可以对 CSS 进行更加合理的操作。

举个栗子。

el.attributeStyleMap.set('opacity', 0.5);
const opacity = el.attributeStyleMap.get('opacity');

这是后我们的opacity变量是一个对象，拥有unit和value两个属性，分别存着这个CSS值的数值还有单位。我们以前无论获取什么CSS值的时候都只能获取一个字符串再进行各种分割的操作，可以一去不复返了！

这里涉及到Typed Object Model 提供的一些新的API，包括attributeStyleMap、computedStyleMap、CSSPositionValue等的用法可能需要各位读者自行去了解，我会在下一篇文章详述Typed Object Model。

Properties/Values

CSS的自定义属性是之前就已经实现的特性，他直接在css中定义新的属性变量，并马上使用。

.button {
     --bg-color: green;
     background-color: --bg-color;
}

但是这里有个问题，如果我们想在css3一些特性里使用，比如transition中使用，会存在一些问题。

.button {
     --bg-color: green;
     background-color: --bg-color;
}

.button:hover {
     --bg-color: blue;
}

当我们把鼠标hover上去按钮的时候，按钮颜色从绿色变成了蓝色，但是过渡属性没有生效。

这时候我们可以使用CSS.registerProperty() API 在JavaScript中对属性进行注册，然后我们发现注册过后的属性在CSS中可以应用在transition属性中，这就解决了我们的问题。

Worklets

worklets可以理解为是一个小进程，他独立运行在主线程的JavaScript之外，主要作用就是在渲染的阶段把使用Houdini提供的一些如Parser、Paint、Layout等API能力进行编程的CSS效果加载进来，以便在CSS中直接进行使用。

xxxWorklet.addModule('xxx.js');

Paint API

Paint API主要是定义了一些语法来使用canvas API在一些区域里绘制特定的图画。

Layout API

Layout API主要是提供给开发者实现自己的布局模块的能力，这里的“布局模块”指的是display 的属性值。

引入Layout文件后，我们就像可以原生display值一样直接使用我们定义的layout 布局。