Houdini, CSS的成人礼

教程大全  / 只看大图  / 倒序浏览   ©

#楼主# 2020-2-29

跳转到指定楼层

马上注册,分享更多源码,享用更多功能,让你轻松玩转云大陆。

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
(我写的标题居然如此押韵)
前情提要

Houdini, CSS的成人礼-1.jpg
    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引用运行一下,然后可以肆无忌怛的通过display:layout(自定义布局名)去使用flex了,想怎么浪就怎么浪
B. Houdini的作用是为CSS提供进一步的完善

Houdini出来是16年的事情了,当时的话大家都觉得个这个新东西挺有发展潜力的,但是我觉得嘛,要客观看待,Houdini做的事情,其实很多时候,原本我们就可以做了,举个例子:
    Paint API: 在JS领域里直接使用Canvas标签和包装起来的相关函数也是可以做的Layout API:提供的是大幅度的自定义布局的功能,但问题是。。。flexbox和grid已经把大多数场景给肝了。Layout要是早出来还好,这比flex完了这么多年,就感觉有点尴尬Typed OM:提供了直接操作CSS属性的对象接口,但问题是CSSOM的标准出来也不少时间了呀,相比之下Typed OM的功能好像就失了一些新意。。。(某个表情包老头估计会说:别笔笔,一梭子ele.style.cssText不就完事了吗!)其他,想到再更
我们可以理解为,Houdini在为一开始CSS没有想好需要设计的一些东西做整体补充(XX可能会迟到!但永远不会缺席。但问题是没打到卡是要扣工资的呀~)
    CSS:大师!我感觉我在传承了Houdini的灵力加持后功力大增!大师:那尼玛是因为你一开始的内力。。。emmm
啊~又到了我最喜欢的互怼环节了呀

    告别CSS为什么CSS一开始这么难学前端工程师讨厌写CSS是什么心态?
为什么说Houdini是CSS漫长的成人礼?

至今为止,刚刚在can i use上查到的结果显示,目前houdini的七大特性,除了Paint API和TypedOM外,其余几个API在浏览器上可以说都是全军覆没的状态(或者说刚刚萌芽更合适一些?),就算是Paint API也好,它也仅仅只在Edge76,Chrome66和Opera52以上实现了技术扎根, 其余浏览器,哪怕是IE,Firefox,Safari的最新版本,也都尚未实现
Houdini, CSS的成人礼-2.jpg 这是除了TypedOM目前唯一支持的Houdini属性
下面这张是谷歌上搜到的,2018年底制作,现在可以认为绝大部分仍然适用
Houdini, CSS的成人礼-3.jpg 此图制作于2018年,到现在为止也仍然使用
可能有同学会问了,上面写的Chrome-Canary是什么意思呢?额。。。canary直译为“金丝雀”,属于和dev,beta相类似的版本的概念范畴,(你就理解为内测版吧,逃~)根据相关资料提示,Layout API在Chrome-Canary上实现部分支持,但是我试用了一下发现还是用不了(心塞),控制台CSS.layoutWorklet打出来是undefined,所以评论区有高人还请指教下啦~
实战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>我们看下效果
Houdini, CSS的成人礼-4.jpg github项目代码如下
好,我们回过头来解释下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:这个参数上文已经多次介绍,这里不再赘述
Paint API坑点总结

    Houdini/paint方法中的ctx只是canvas中的ctx的子集!!canvas绘制文字的接口它是不支持的!Chrome提供了demo项目代码,但是里面有一大半都是还运行不了的,即使你用的是超前最新版Chrome的Chrome-canary浏览器,都是不行的。但放心,这不是你的问题addModule将导致发起HTTP请求,如果采用文件方式打开HTML可能会遇到跨域问题,注意要自己写服务端测试,并且注意服务端要做好对CSS/JS/HTML的Content-Type的处理定义的paint画布的使用方式是background-image: paint(watermark) 而不是background-image: watermark()
警告,下面讲的都是当前没有任何stable浏览器可以运行的代码,我是根据W3C的草案和示范代码要求来的,正所谓——姜太公写代码,愿者Debug

Layout

<抱歉写的太累了,休息下,本部分待会再更>
谢谢大家的支持和鼓励!我一定会加油创作的,我今天晚上会先用一点点时间把一个小项目干完,然后就会以极其热情的态度去把剩下这部分搞上。为了证明我的决心,我决定以下面这张表情发誓!
Houdini, CSS的成人礼-5.jpg Animation

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

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

<抱歉写的太累了,休息下,本部分待会再更>
CSS!你的Houdini来啦

Houdini, CSS的成人礼-6.jpg 但是你用不了,啊哈哈哈哈!

Houdini, CSS的成人礼-7.jpg 本文完
参考资料

    Houdini:CSS 领域最令人振奋的革新Chrome提供的Houdini Demo1中Demo的在线运行地址(注意很多是暂时跑不了的)layout的API草案(W3C)Painting API的入门指导(MDN)Parser API草案(W3C)AnimationWorklet工作草案(W3C)
给大家一点点建议,谷歌英文资料吧。。。很多干货
分享淘帖
回复

使用道具

您的回复是对作者最大的奖励

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关于作者

  • 主题

    7

  • 帖子

    69

  • 关注者

    0

Archiver|手机版|小黑屋|云大陆 | 赣ICP备18008958号-4|网站地图
Powered by vrarz.com!  © 2019-2020版权所有云大陆