关于 CSS Houdini

By赵的拇指At2019-09-05In5Views258

`CSS Houdini` 是什么

CSS Houdini 是一组API，允许开发者直接访问CSS对象模型（CSSOM），使开发人员能够编写浏览器可以解析为CSS的代码，从而创建新的CSS功能，而无需等待它们在浏览器中本机实现。

CSS Houdini的作用有点像Babel之于Javascript。简单来讲，他就是CSS中的Babel。

现状

polyfill在JS中非常常见，部分浏览器尚未支持的api都有对应的polyfill实现，例如：Promise、async/await、Array.includes......

其实目前来讲CSS中也是有polyfill的概念的。只不过我们接触的太少，大部分都了解的比较少。

现在我们可以做的就是通过操作CSS对象来实现polyfill，可以通过documnet.styleSheets访问。不过真正操作起来还是相当麻烦的，具体的可以看这篇文章The Dark Side of Polyfilling CSS。

`Houdini` API

下面简单讲一下Houdini的几个API。（注：目前registerPaint、registerProperty等API，最新版chrome还不支持(版本 76.0.3809.132)，需要打开chrome://flags/，启用Experimental Web Platform features））

Worklets

提供给JS用来实现CSSpolyfill的，由渲染引擎调用并扩展，独立于JS主线程，和web worker类似。

CSS Parser API

允许开发者自由扩展 CSS 词法分析器，比如新的媒体规则、新的伪类、嵌套等。

CSS Properties and Values API

用于注册新CSS属性的API，例如:

CSS.registerProperty({
    name: '--line-width',
    syntax: '<length>',
    initialValue: '2px'
});

使用：

.box {
  --line-width: 2px;
}

CSS Typed OM

将CSSOM值字符串转换为有意义的JavaScript表示形式并返回可能会产生显着的性能开销。CSS Typed OM将CSS值公开为类型化JavaScript对象，以允许其执行高性能操作。

CSS Layout API

用于扩展CSS布局系统，通过此API可以编写自己的布局算法。

CSS Painting API

用于绘制图形到背景边框上，例如用于background

class PlaceholderBoxPainter {
    paint(ctx, size) {
        ctx.lineWidth = 2;
        ctx.strokeStyle = '#666';

        // draw line from top left to bottom right
        ctx.beginPath();
        ctx.moveTo(0, 0);
        ctx.lineTo(size.width, size.height);
        ctx.stroke();

        // draw line from top right to bottom left
        ctx.beginPath();
        ctx.moveTo(size.width, 0);
        ctx.lineTo(0, size.height);
        ctx.stroke();
    }
}

registerPaint('placeholder-box', PlaceholderBoxPainter);

使用

.box {
    background: paint(placeholder-box);
}

总结

可见Houdini是CSS的一项革新技术，之后再也不用为了各个浏览器的兼容性去头疼了，开发者可以利用他抹平各个浏览器平台的差异（前提是Houdini早日被所有浏览器支持(( ）。其次各种动画布局在可以通过它去容易的实现。期待ing...

赵的拇指

CSS Houdini 是什么

现状

Houdini API