【CSS】Houdini, CSS的成人礼
前情提要

CSS:老板,你看ES9,ES10都出来了,您看我的事情什么时候...
W3C: 这不是正在走着流程嘛!小C你不要心急!
W3C:(语重心长)你看啊,我们先(1)提个开发提案章程, 然后再批准成立工作组(2)紧接着工作组建立标准和指南,然后再修改修改。(3)再然后啊,给顾问委员会技术报告审核一下(4)最后浏览器厂商再实现一下 这不就完事了吗?大概不到10年咱们就全部搞定了吧
CSS: 。。。。。。 (难过)
W3C:(顿了顿):但是这些年啊,你的刻苦努力我们都是看在眼里的!
CSS:所以!!??(兴奋加期待)
W3C:所以啊,我们要感谢你为前端社区,所作出的贡献!
CSS:。。。。。。(沮丧)
W3C:但是呢!考虑到你设备老旧,是该更新一下啦。
CSS:请问是!?(兴奋加期待,还有微微的迟疑)
W3C:没错,这是老板我送给你的步入成年的礼物—— Houdini
什么是Houdini
S1. Paint API
background: paint(背景函数名);
S2.Layout API
display:layout(自定义布局名)
S3. AnimationWorklet
S4. Properties & Values
用于自定义CSS属性并为其约定类型,行为和默认值。可以看作less的@式定义和Sass的$式定义的2.0加强版。顺便一提,它经常和前3个API搭配使用。
S5. Parser API
S6.Typed OM
为什么说Houdini是CSS的成人礼?
A. 为CSS新特性提供polyfill
B. Houdini的作用是为CSS提供进一步的完善
Paint API: 在JS领域里直接使用Canvas标签和包装起来的相关函数也是可以做的
Layout API:提供的是大幅度的自定义布局的功能,但问题是。。。flexbox和grid已经把大多数场景给肝了。Layout要是早出来还好,这比flex完了这么多年,就感觉有点尴尬
Typed OM:提供了直接操作CSS属性的对象接口,但问题是CSSOM的标准出来也不少时间了呀,相比之下Typed OM的功能好像就失了一些新意。。。(某个表情包老头估计会说:别笔笔,一梭子ele.style.cssText不就完事了吗!)
其他,想到再更
CSS:大师!我感觉我在传承了Houdini的灵力加持后功力大增!
大师:那尼玛是因为你一开始的内力。。。emmm
啊~下面又到了我最喜欢的互怼环节了呀
为什么说Houdini是CSS漫长的成人礼?


实战Houdini之Paint API
// 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我们过会再仔细解释,我们先把代码跑通再说)
CSS.paintWorklet.addModule('paint.js');
注意,paint.js内部会形成一个封闭而独立的,叫worklet的作用域,它和全局Window是不一样的!不要在这里尝试使用fetch等方法。
<!-- HTML -->
<div class="foo"></div>
<!-- CSS -->
<style>
.foo {
border: 1px solid blue;
width: 200px;
height: 200px;
/*指定背景色为红色*/
--color: red;
/*使用刚刚注册的paint方法*/
background-image: paint(circle);
}
</style>
我们看下效果

https://github.com/penghuwan/houdini-module
registerPaint('circle', class {
// ctx是Canvas的ctx的子集,实现了除文字操作外的大多数方法和属性
paint(ctx, size, props) {
// size表示使用该paint方法的div的长和宽
const width = size.width / 2;
const height = size.height / 2;
// ...
}
});
// 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);
}
警告,下面讲的都是当前没有任何stable浏览器可以运行的代码,我是根据W3C的草案和示范代码要求来的,正所谓——姜太公写代码,愿者Debug
Layout
Animation
Propertis和values
Typed OM
CSS!你的Houdini来啦

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

参考资料
layout的API草案(W3C)
【CSS】Houdini, CSS的成人礼的更多相关文章
- CSS Houdini:用浏览器引擎实现高级CSS效果
vivo 互联网前端团队-Wei Xing Houdini被称之为Magic of styling and layout on the web,看起来十分神秘,但实际上,Houdini并非什么神秘组织 ...
- CSS Vocabulary – CSS 词汇表,你都掌握了吗?
CSS 是前端开发必备技能,入门容易,深入难.比如像 Pseudo-class.Pseudo-element.Media query.Media type 以及 Vendor prefix 的概念,很 ...
- css样式 --- CSS hack
前端样式,虽然不是经常需要hack,但是我们经常会遇到各浏览器表现不一致的情况.基于此,某些情况我们会极不情愿的使用这个不太友好的方式来达到大家要求的页面表现.我个人是不太推荐使用hack的,要知道一 ...
- CSS Sprites (CSS图像拼合技术)教程工具
什么是CSS Sprites? “Sprite”(精灵)这个词在计算机图形学中有它独特的定义,由于游戏.视频等画质越来越高,必须有一种技术可以智能的处理材质和贴图,并且要 同时保持画面流畅.“Spri ...
- CSS:CSS定位和浮动
CSS2.1规定了3种定位方案 1.Normal flow:普通流(相对定位 position relative.静态定位 position static) 普通流(normal flow,国内有人翻 ...
- CSS之CSS hack
由于不同的浏览器对CSS的支持及解析结果不一样,还由于CSS中的优先级的关系.我们就可以根据这个来针对不同的浏览器来写不同的CSS. CSS Hack大致有3种表现形式,CSS类内部Hack.选择器H ...
- HTML+CSS笔记 CSS笔记集合
HTML+CSS笔记 表格,超链接,图片,表单 涉及内容:表格,超链接,图片,表单 HTML+CSS笔记 CSS入门 涉及内容:简介,优势,语法说明,代码注释,CSS样式位置,不同样式优先级,选择器, ...
- CSS:CSS学习总结
CSS:CSS学习总结 背景 CSS是一种声明式的语言,学好CSS的难度甚至大于学好一门服务器语言(我个人的感觉),这周在学习CSS,就记录一下学习经验. 1.规则声明顺序 因为CSS的样式具备层叠性 ...
- CSS Sprites (css精灵)
CSS Sprites CSS Sprites在国内很多人叫css精灵,是一种网页图片应用处理方式.它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去,这样一来,当访问该页面时,载入的图片就不 ...
随机推荐
- 1.svn 彻底clear时,注意代码备份 2.借助vc助手加头文件
1.svn 彻底clear时,注意代码备份 2.不小心彻底clear可以在回收站找到 3.借助vc助手加头文件
- Eclipse中Cannot nest src folder解决方法
错误示例: : Java Model Status [Cannot nest output folder 'xxx/bin/main' inside output folder 'xxx/bin'] ...
- 新手小白之学习python一飞冲天日志之—基本数据类型,条件控制语句
python的历史 04年目前最流行的WEB框架Django诞生 python2:源码不统一,有重复的功能代码 python3:源码统一,没有重复的功能代码 python是一个什么编程语言 编译型:编 ...
- Spring_简单入门(学习笔记1)
Spring是一个分层的JavaSE/EE full-stack(一站式) 轻量级开源框架. 具体介绍参考 一:IoC(Inversion of Control)控制反转,将创建对象实例反转给spri ...
- 简单web网页与SSM后台交互
简单web网页与SSM后台交互 情况说明 如今,已经搭建好SSM后台开发环境,并且可以经由postman工具测试成功.现在尝试写出web前端网页,通过实现简单的提交.注册.查询功能来加深对前后端数据传 ...
- ArcGIS API For JavaScript 开发(二)基础地图
有了开发环境,接下来的就是实践了,实践是检验真理的唯一标准! 多多练习,不要觉得自己能够想的出来就万事大吉了,还是得动手做才是最好的检验自己的能力. 基础地图,本节将通过arcgis api for ...
- c的格式输出“%”
- [Revit]Autodesk Revit 二次开发整理(资料、准备工作和环境搭建)
1 前言 Revit被Autodesk收购之后,整理和开放了一大部分API,供开发者实现自己的功能和程序,总体来说API的功能比较完善,毕竟市面上已经出现了各式各样的插件. 本人也是初学者,在Revi ...
- 完美解决eclipse编辑器中文字符过小问题
window – preferences – general – appearance – colors and fonts – basic – text font – edit 把弹出页面中“西欧语 ...
- python多进程详解
目录 python多进程 序.multiprocessing 一.Process process介绍 例1.1:创建函数并将其作为单个进程 例1.2:创建函数并将其作为多个进程 例1.3:将进程定义为 ...