一个困扰十多年的css问题即将被解决啦
CSS里边有个困扰了我们十多年的问题
W3C团队最近终于把它解决了
什么问题呢
我们先来看这个demo哈
现在这个容器的高度是
我们看不到它
但如果我们再写一个height
它肯定会覆盖前面的
对吧?这个没问题
但前提肯定是这里边写的值要合法
比如这样写
它肯定就没办法覆盖
所以我们写一个auto的话
大家看从效果上来看
肯定它是一个合法值
但是呢auto有个最大的问题
就是它不支持过渡动画
大家看我来切换这个auto的时候
没有任何过渡
但如果是100像素的话呢
它是有过渡的 对吧
之前我们碰到这种问题
都是用max-height来解决
比如说这样
我们开始呢把max-height设成
这样呢它也不会显示这个容器
然后呢
我们再把这个max-height设的大一点
比如说3个
大家看它看起来也是有动画
但是这个动画的效果
其实是取决于这个999设了多大
比如我们设小一点：
它看起来呢
它就会好一点
看到了吗
你设的再大一点
你会发现他其实就像没有动画了一样
我们再来试一下看看
为什么？因为他要在这0.3秒内
把这动画从0到5个9来执行
所以在前面我们能看到的这一点
看起来就像一晃而过
所以max-height这种方法
当时也只是一个折中的方案（不考虑js的前提）
大家看Chrome官网这个issues哈
（为啥说它有十多年了）
这是2013年提的一个issues问题
就是这个height auto
它不只是动画
甚至呢大家看在2016年的时候
它就被标记成
won't fix了
大家看
然后呢
23年底的时候呢
他又重新打开了Reopen了
因为W3C开始计划解决这个问题了
那现在呢
W3C已经把这个标准写好了
只是现在处于一个草稿待发布的状态
增加了一个方法叫calc-size
而且呢chrome已经支持了哈
它在123版本就开始测试了
打算在128版本开始默认的就启用它了
那我现在用的是126的版本
所以我可以这样把它启动起来
我们Chrome flags
然后搜这个Web platform
把这个打开
现在默认是禁用的
好需要重启一下
OK
然后呢
我们这里边就会多一个属性哈
height是
这里写一个calc-size
然后写个auto
大家看它就能完美支持过渡了
而且呢它还支持在这里边加运算
比如说我这写一个size乘以1.
也就是说
我让它的高度是自动高度的1.5倍
那与此同时呢
其实W3C还写了另外一个属性
Interpolate-size
但是呢我在这个Chrome这个版本里测
还测不出来
它怎么用呢
W3C是这样计划的啊
就在这里
在root里边
然后这个属性这里边可以怎么写呢
我们来看一下啊
interpolate它有两个值
一个是numberic only
也就是说默认的是这个值
它只能支持0-100像素啊这种切换
还有一个就是allow keywords
就是通过这种方式全局来切换
他是不是支持从0到auto
的动画
比如说
W3C准备了两个方案供大家选择
一种是在这种全局的切换
一种是通过calc-size的方式
那这种方式
现在在chrome下已经可以测试了哈
而且哈
这个属性各大浏览器也开始支持了
比我们在这里能看到
像Firefox啊
或者Safari都已经有自己的计划了
最后我再给大家看个好玩的哈
就是我在研究的过程中
像这个属性的命名我发现也挺有意思
有人把他们团队内部的一个聊天记录
贴上来了
这里边他他们在讨论这个问题哈
然后呢就有人提出了这个名字
大家看这是第一次提的
他叫他后边还多了一个-keywords
是这个方案
但是呢最终没有被采用
继续往下搜这个关键字哈
大家看还有人提了这样的方案
normal 和 allow-keywords
已经跟我们现在很接近了哈
然后讨论来讨论去
又提出来numberic-only和allow-keywords
这个现在就是最终的方案了
已经写到W3C标准里边了
最后更新于
这有帮助吗？