Question

我有点CSS：

  transform: translateY(50px);
  transform: translateY(max(50px, env(safe-area-inset-bottom)));

我希望不支持max()的浏览器会退回到transform: translateY(50px)

但是，Chrome和Firefox似乎都不是这种情况。

https://jsbin.com/xozexin/7/edit?html,css,output

Answer 1

这不是CSS Fallbacks的真正工作方式。以以下代码段为例：

.some-selector {
    width: 200px;
    color: 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)))"))

如何从max（env（safe-area-inset-bottom））声明CSS后备

1 个答案: