关于 CSS Houdini

CSS Houdini 是什么

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

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

现状

polyfill在JS中非常常见,部分浏览器尚未支持的api都有对应的polyfill实现,例如:Promiseasync/awaitArray.includes......

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

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

Houdini API

下面简单讲一下Houdini的几个API。(注:目前registerPaintregisterProperty等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);
}

总结

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

参考

  1. CSS Houdini MDN
  2. The Dark Side of Polyfilling CSS
  3. Can I use Houdini
  4. Say Hello to Houdini and the CSS Paint API
  5. 体验Houdini