有趣的css

https://www.jasondavies.com/wordcloud/


http://tridiv.com/

https://720yun.com/

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

猜你喜欢

转载自blog.csdn.net/zhanghuanhuan1/article/details/81487445