我有一点CSS：
transform: translateY(50px);
transform: translateY(max(50px,env(safe-area-inset-bottom)));
我的期望是不支持max()的浏览器会退回转换：translateY(50px)
但是,Chrome和Firefox似乎都并非如此.
最佳答案
这不是CSS Fallbacks的真正工作方式.
以以下代码段为例：
原文链接：https://www.f2er.com/css/530716.html以以下代码段为例：
.some-selector {
width: 200px;
width: max(50px,200px);
}
由于max不是有效的CSS函数(浏览器不支持),因此浏览器不会更改和替换width值,但会将width属性的值保留为200px.
在您的情况下,translateY是有效函数,但您刚刚传递了无效值.
或者,您可以使用CSS @supports
div {
width:250px;
height:200px;
background: green;
transform: translateY(50px);
}
@supports (width: max(5px,5px)) {
div {
transform: translateY(max(50px,env(safe-area-inset-bottom))) !important;
}
}
我已经用JavaScript测试过
console.log(CSS.supports("width","max(5px,10px)"))
console.log(CSS.supports("transform","translateY(max(50px,env(safe-area-inset-bottom)))"))