【CSS】Houdini, CSS的成人礼

前情提要

  • CSS :老板,你看ES9,ES10都出来了,您看我的事情什么时候...

  • W3C : 这不是正在走着流程嘛!小C你不要心急!

  • W3C :(语重心长)你看啊,我们先(1)提个开发提案章程, 然后再批准成立工作组(2)紧接着工作组建立标准和指南,然后再修改修改。(3)再然后啊,给顾问委员会技术报告审核一下(4) 最后浏览器厂商再实现一下 这不就完事了吗?大概不到10年咱们就全部搞定了吧

  • CSS : 。。。。。。 ( 难过 )

  • W3C :( 顿了顿 ):但是这些年啊,你的刻苦努力我们都是看在眼里的!

  • CSS :所以!!??(兴奋加期待)

  • W3C :所以啊, 我们要感谢你为前端社区,所作出的贡献!

  • CSS :。。。。。。( 沮丧

  • W3C :但是呢!考虑到你设备老旧,是该更新一下啦。

  • CSS :请问是!?(兴奋加期待,还有微微的迟疑)

  • W3C :没错, 这是老板我送给你的步入成年的礼物 —— Houdini

什么是Houdini

Houdini包含6组API

S1. Paint API

简单地讲,Paint API就是允许你通过JavaScript注册一个背景函数,类似于linear-gradient()那种,在定义时候可以提供Canvas的2Dcontext给你自行绘制,你通过JS注册这个背景函数后呢,就可以自由地在CSS中通过以下方式使用该背景

background: paint(背景函数名);

如果想了解Paint API的MDN入门指导请点击这里 ,因为这个MDN上是有入门文档的,所以就不放草案了

S2.Layout API

可以允许你自行定义布局,并通过以下方式使用:

display:layout(自定义布局名)

这意味着什么呢?我们常用的flex布局, 栅格布局都可以重新通过display进行定义和使用,非常方便。甚至, 如果/假如Layout API早出来10年的话,我们甚至可以为这些类似于flex等的新兴属性定义polyfill! , 就像我们为ES6中的proxy对象,promise对象分别添加proxy-polyfill,promise-polyfill一样,实现对低级浏览器的兼容,这无疑让人感到高兴。

Layout的定义虽然是为布局使用的,但实际上,根据W3C草案,它还有控制定位和overflow等的能力,总之,除了动画意外的疑难杂症,Layout几乎都能够涉足。如果你想仔细了解: layout的W3C草案

S3. AnimationWorklet

这么关键的场合怎么能少得了动画呢?它可以控制动画的效果。该 API 使用户可以在专有的线程中去运行动画,从而大大降低了主线程的压力。 如果想了解AnimationWorklet的W3C草案内容请点击这里 这个草案在今年的6月底刚刚发布

S4. Properties & Values

用于自定义CSS属性并为其约定类型,行为和默认值。 可以看作less的@式定义和Sass的$式定义的2.0加强版 。顺便一提, 它经常和前3个API搭配使用。

S5. Parser API

允许开发者自由扩展 CSS 词法分析器,比如新的媒体规则、新的伪类、嵌套等等。 时至今日,它还没有形成一个完整的草案 ,只是初具模型,大家可以阅读 Parser API草案(W3C)

S6.Typed OM

用人话解释就是,原本我们不是可以通过element.style.cssText去修改CSS样式嘛,大佬们觉得这样的字符串操作麻烦而且速度很慢,所以定义了一组CSS专有的接口对象去进行操作,Typed OM提供了与底层值交互的接口,通过使用专门的JS对象来表示它们。除此外还增加了一些其他的API 点击这里查看MDN的Typed OM的入门指导

为什么说Houdini是CSS的成人礼?

这个问题等同于:

问题:结合CSS的产生背景和历史渊源,请问如何客观评价Houdini的历史地位? (本小题10分,请考生答题时不要超出装订线) ( 难道我们在考历史题吗?逃Σ( ° △ °|||)︴)。

A. 为CSS新特性提供polyfill

它的主要作用在于给予开发者更多开发CSS的自由度,推动CSS新特性发布的进程,同时为未来的那些像flexbox这样优秀的特性提供polyfill ,让我们可以不再需要顾忌兼容性,而能够尽快地使用新发布的CSS特性,当然,CSS的生态也会因此更为繁荣。

举个例子,我们在使用ES6的Promise的时候,怎么考虑让它在低版本浏览器不报“Promise is undefined”的错误呢?很简单,只要加个promise-polyfill就可以了,如果你想一本万利,那么导入个babel-polyfill,所有(严格的说是大部分)ES6的新对象都可以放心用了。

试着想一下, 假如Houdini比flex早出来10年 ,这个时候还需要担心flex兼容性吗?不需要了, 我们可以从NPM社区上下一个包 ,这个前人写好的 npm包注册了一个layout方法,你只要下载这个包,在index引用运行一下,然后可以肆无忌怛的通过使用flex了 ,想怎么浪就怎么浪

B. Houdini的作用是为CSS提供进一步的完善

Houdini出来是16年的事情了,当时的话大家都觉得个这个新东西挺有发展潜力的,但是我觉得嘛, 要客观看待 ,Houdini做的事情,其实很多时候,原本我们就可以做了,举个例子:

  1. Paint API: 在JS领域里直接使用Canvas标签和包装起来的相关函数也是可以做的

  2. Layout API: 提供的是大幅度的自定义布局的功能,但问题是。。。flexbox和grid已经把大多数场景给肝了。Layout要是早出来还好,这比flex完了这么多年,就感觉有点尴尬

  3. Typed OM :提供了直接操作CSS属性的对象接口,但问题是CSSOM的标准出来也不少时间了呀,相比之下Typed OM的功能好像就失了一些新意。。。(某个表情包老头估计会说:别笔笔,一梭子ele.style.cssText不就完事了吗!)

  4. 其他,想到再更

我们可以理解为,Houdini在为一开始CSS没有设计想要,并设计进去的一些东西做一些补充 (XX可能会迟到!但永远不会缺席。但问题是没打到卡是要扣工资的呀~)

  • CSS:大师!我感觉我在传承了Houdini的灵力加持后功力大增!

  • 大师:那尼玛是因为你一开始的内力。。。emmm

啊~下面又到了我最喜欢的互怼环节了呀

  1. 告别CSS

  2. 为什么CSS一开始这么难学

  3. 前端工程师讨厌写CSS是什么心态?

为什么说Houdini是CSS漫长的成人礼?

至今为止,刚刚在can i use上查到的结果显示,目前houdini的七大特性,除了Paint API和TypedOM外,其余几个API在浏览器上可以说都是 全军覆没 的状态(或者说 刚刚萌芽 更合适一些?),就算是Paint API也好,它也仅仅只在Edge76,Chrome66和Opera52以上实现了技术扎根, 其余浏览器,哪怕是IE,Firefox,Safari的最新版本,也都尚未实现

下面这张是谷歌上搜到的,2018年底制作 ,现在可以认为 绝大部分仍然适用

此图制作于2018年,到现在为止也仍然使用

可能有同学会问了,上面写的Chrome-Canary是什么意思呢?额。。。canary直译为“金丝雀”,属于和dev,beta相类似的版本的概念范畴,(你就理解为内测版吧,逃~)根据相关资料提示,Layout API在Chrome-Canary上实现部分支持,但是我试用了一下发现还是用不了(心塞),控制台CSS.layoutWorklet打出来是undefined,所以评论区有高人还请指教下啦~

Chrome-Canary中国区下载链接

实战Houdini之Paint API

那咱们就写一个咱们可以在Chrome上跑的demo好了

首先,我们需要编写一个JavaScript文件,我们命名为paint.js,然后通过 registerPaint方法 注册一个paint方法,paint方法可以绘制div的背景,例如下面我们把这个paint方法命名为circle,这意味着它可以通过background: paint(circle)去使用绘制的画布。我们上面也说过,我们注册paint方法时系统会提供ctx作为参数, 这个ctx是HTML5/Canvas的2Dcontext的子集,实现了除了文字操作外的大多数方法和属性。 (文字操作指的是ctx.fillText或者ctx.strokeText这一类方法)。

下面我们来通过JS注册一个paint方法,来为div添加一个background, 这个paint方法命名为circle,它的功能是为div提供一个半径为Math.min(长,宽)的实心圆,圆的背景色可在CSS的上下文代码块中通过--color这个属性名指定。

paint.js的全部代码如下

// paint.js
registerPaint('circle', class {
    // 决定了paint方法中props中能获取的CSS属性值
    static get inputProperties() { return ['--color']; }

    // 绘制一个半径为长或宽的最小值的圆形作为背景
    // ctx是Canvas的ctx的子集,实现了除文字操作外的大多数方法和属性
    paint(ctx, size, props) {
        // size表示使用该paint方法的div的长和宽
        const width = size.width / 2;
        const height = size.height / 2;
        const radius = Math.min(width, height);
        // props.get表示将根据inputProperties返回的键值从CSS代码块中获取相应属性
        const color = props.get('--color');
        // 给画笔着色
        ctx.fillStyle = color;
        // 开始动笔绘制
        ctx.beginPath();
        // 以width,height为圆心,radius为半径画圆圈,从0度画到360度
        ctx.arc(width, height, radius, 0, 2 * Math.PI);
        // 用fillstyle把圆圈轨迹内部进行颜色填充
        ctx.fill();
        // 搞定!
    }
});

(代码中的具体API我们过会再仔细解释,我们先把代码跑通再说)

然后,仅仅这样做是不够的,我们还需要在主线程里,例如main.html的脚本里。通过下面这个API去加载我们刚刚定义的paint.js

CSS.paintWorklet.addModule('paint.js');

注意,paint.js内部会形成一个封闭而独立的,叫worklet的作用域,它和全局Window是不一样的! 不要在这里尝试使用fetch等方法。

上面两步做完了, 我们就可以使用CSS去使用我们刚刚定义的paint函数了

<!-- HTML -->
<div class="foo"></div>
<!-- CSS -->
<style>
.foo {
   border: 1px solid blue;
   width: 200px;
   height: 200px;
   /*指定背景色为红色*/
   --color: red;
   /*使用刚刚注册的paint方法*/
   background-image: paint(circle);
}
</style>

我们看下效果

github项目代码如下

https://github.com/penghuwan/houdini-module

好,我们回过头来解释下paint方法里面的逻辑

(1)size 它是一个对象,保存了使用这个定义paint方法的div的长和宽,可以分别通过size.width和size.height去访问

registerPaint('circle', class {
    // ctx是Canvas的ctx的子集,实现了除文字操作外的大多数方法和属性
    paint(ctx, size, props) {
        // size表示使用该paint方法的div的长和宽
        const width = size.width / 2;
        const height = size.height / 2;
        // ...
    }
});

(2)props 我们可以通过props参数获取CSS上下文代码块(指的是paint(circle)在的那个代码块)的 其他CSS属性, 但是这个属性需要在inputProperties函数中进行声明,声明的方法是在函数中返回一个数组,数组项为属性名称

// paint.js
registerPaint('circle', class {
    // 决定了paint方法中props中能获取的CSS属性值
    static get inputProperties() { return ['--color']; }
    // ctx是Canvas的ctx的子集,实现了除文字操作外的大多数方法和属性
    paint(ctx, size, props) {
        const color = props.get('--color');
    }
});
// style
.foo {
   /*指定背景色为红色*/
   --color: red;
   /*使用刚刚注册的paint方法*/
   background-image: paint(circle);
}

(3)ctx: 这个参数上文已经多次介绍,这里不再赘述

警告 ,下面讲的都是当前没有任何stable浏览器可以运行的代码,我是根据W3C的草案和示范代码要求来的,正所谓—— 姜太公写代码,愿者Debug

Layout

<抱歉写的太累了,休息下,本部分待会再更>

Animation

<抱歉写的太累了,休息下,本部分待会再更>

Propertis和values

<抱歉写的太累了,休息下,本部分待会再更>

Typed OM

<抱歉写的太累了,休息下,本部分待会再更>

CSS!你的 Houdini来啦

但是你用不了,哈哈哈哈!

来,我们换一个老司机的版本看看

CSS小姐姐! 你daisuki的 (最喜欢) Houdini来了哟!

 

但是你用不了,哈哈哈! 哈哈哈。。。啊!?。。。。。啊雷雷?

本文完

参考资料

  1. Houdini:CSS 领域最令人振奋的革新

  2. Chrome提供的Houdini Demo

  3. 1中Demo的在线运行地址(注意很多是暂时跑不了的)

  4. layout的API草案 (W3C)

  5. Painting API的入门指导

  6. Parser API草案(W3C)

  7. AnimationWorklet工作草案(W3C)

给大家一点点建议,谷歌英文资料吧。。。很多干货

我来评几句
登录后评论

已发表评论数()

相关站点

热门文章