为什么需求 CSS Houdini
1. 为引擎分忧
从『UI稿』到『前端页面』的间隔是多少？
大约隔着一个 can i use 吧~
即使再美观的款式，浏览器的css引擎没有完成咱们也支撑不了。假设咱们能够参加到浏览器对CSS的解析和烘托中，也就有或许完成异形边框、渐变动画… CSS Houdini 不包括别致的效果，而是交给开发者来完成。
2. CSS ployfill
由于JS是一门动态语言，能够『自己解说自己』，能够经过 polyfill 向下兼容。CSS 还没有这才干。受JS启发，Apple、Google、Mozilla等浏览器厂商的工程师建立的工作组 ———— Houdini。在支撑 CSS Houdini 的浏览器之间，CSS 的差异将被抹平。
简介
CSS Houdini 是一组扩展CSS解析、烘托才干的API
- Parser API
- Properties & Values API
- Typed OM
- Layout API
- Paint API
- Worklet
总归，假如你只重视Blink内核浏览器那能够用 Paint API 、Properties & Values API 、Typed OM（乃至一部分 Layout API 、Animation Worklet）。
is houdini ready yet
CSS Proprieties and Values API
用法简介
特点-值API能够让开发者界说引擎对自界说特点的解析行为。
- 需求注册自界说特点
// js
window.CSS.registerProperty({
name: '--my-color',
syntax: '<color>',
inherits: false,
initialValue: '#000',
});
// css
@property --my-color {
syntax: '<color>';
inherits: false;
initial-value: #000;
}
经过 javascript window.CSS.registerProperty 和 css @property 都能够注册自界说特点。
-
name：要求以
--最初，同一文档内的自界说特点处于同一命名空间。 -
syntax：默认为
*， 常见值有<color>（#000）、<length>（2px）、<number>（20%）、<time>（2s），具体参见css基本数据类型 - inherits：是否承继
- initial-value：初始值
- 使用自界说特点
.box {
--my-color: #333;
}
- 经过
var()引证自界说特点
.box {
color: var(--my-color);
}
特点-值API是供给了解析的才干（即第1步），2和3是 css自界说特点。自界说特点的兼容性更好，但是不能界说解析行为，常用在UI库换肤。
注意事项
- 特点一经注册无法更新注册信息，经过js也不可
- 与原生特点不同，解析时不会验证值的有效性。在运用时无效值不会回退到前面同名的有效值，而是回退到初始值。
示例-渐变色过渡
-
transition: background-image 1s无法见效，由于引擎不能了解两个 linear-gradient之间有什么线性关系。 - 缺省了注册的过程也无法见效，由于
#000默认是*类型，需求作为<color>才干线性变化。
CSS Typed OM
类比DOM，让开发者摆脱解析 document 的字符串。CSS Typed OM 也供给了结构化的 js API，而不是读写CSS字符串。
基类-CSSStyleValue
能够类比为DOM中的HTMLElement，其他的款式数据的类型都要承继 CSSStyleValue：
-
CSSImageValue：图像数据，比方
url(xxx.png) -
CSSKeywordValue：枚举数据，比方
flex、inline-block -
CSSNumericValue：数值数据，比方
10px、20% -
CSSPositionValue：方位数据，比方
top left、10px 20px -
CSSTransformValue：transform值的数据，比方
width 1s - CSSUnparsedValue：自界说特点值
Typed OM对于款式的读写将运用到这些数据类型。只需重视自己操作的特点对应值类型即可（比方读写width要用到CSSNumericValue）。
StylePropertyMap
StylePropertyMap 是操作款式的API
- attributeStyleMap：dom style特点上的款式调集，可读写
- computedStyleMap：经过计算的，包括内联和link的款式，只读
Paint API
开发者能够经过paint()办法书写 JavaScript 函数，来控制制作元素的布景、边框或者内容区域。
API 中心是完成与 paint worklet 交互。worklet 与 web worker 相似，可了解为浏览器供给的一系列完成特定任务的 web worker 。webpack4 的项目需合作 woklet-loader 完成 paint worklet 构建。
- 在一个单独的js文件中，经过
registerPaint注册一个 paint worklet 的行为。保证第一个参数的 worklet name 仅有，后边将在 css 中经过 name 调用制作行为。
registerPaint('highlight', class Highlight {
// 画布装备
static get contextOptions() {
return {alpha: true};
}
// 声明需求用到上下文的特点
static get inputProperties() {
return ['--my-color'];
}
paint(ctx, size, properties, args) {
// 制作
}
});
-
CSS.paintWorklet.addModule载入前一步的行为。
import highlightURL from 'worklet-loader!./highlight.js';
CSS.paintWorklet.addModule(highlightURL);
- 在 css 中
paint(worklet name)运用制作行为。
.demo {
background-image: paint(highlight);
}
使用场景：
- 异形的边框
- 规则复杂的纹路布景
- 替代一部分交互弱化的 canvas 场景
精品示例
未来
还有一些未标准化的API，比方 自界说布局的 API、自界说字体的API…
由所以浏览器厂商主导，各家有一定完成的动力。比起动辄十年的委员会主导，CSS Houdini 应该不会让咱们等太久，未来可期。
