https://www.jasondavies.com/wordcloud/
css hint
Houdini
worklets
CSS workflows
Typed OM Object
使用css 变量
更少的bug,例如数字值总是以数字的形式返回而不是字符串。
el.style.opacity+=0.1;
el.style.opacity==='0.301'//dragons!
算数运算和单位转换。在绝对长度单位(例如px=>cm)之间进行转换并进行基本的数学运算。
数值范围限制和舍入。typed OM 通过对值进行范围的限制和舍入。以使其在属性的可接受范围内。
更好的性能。浏览器必须做更少的工作序列化和反序列化字符串。现在,对于css值。引擎可以对js和c++使用相似的理解。tab Akins 已经展示了一些早期的性能基准测试,与使用旧的css OM 和字符串相比 Type OM的运行速度快了30%,这对使用reqquestionAnimationFrame()处理快速css东湖可能很重要。
crbug.com/808933可以追踪Blink 的更多性能演示。
错误处理。新的解析方法带来了css世界中的错误处理。
“我应该使用驼峰式的css名称还是字符串呢?”你不需要猜测名字是驼峰还是字符串(例如:el.style.backgroundColor vs el.style['background-color'])。Type OM中的css属性名称始终是字符串,与您实际在css中编写的内容一致。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>
</title>
<style type="">
:root{--main-color: orange;}
body{
background: var(--main-color);
transition: background 2s;
}
</style>
</head>
<body>
<script type="text/javascript">
if(!CSS in window || !CSS.paintWorklet){
document.write("sorry")
}
setTimeout(function(){
document.documentElement.style.setProperty('--main-color','yellowgreen')
},1000)
</script>
</body>
</html>
sky.js