有趣的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

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

时间在飞飞

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值