如何宣布Max(Env(Safe-Area-Inset tostom))的CSS回退

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后备的工作方式。以以下片段为例：

.some-selector {
    width: 200px;
    width: max(50px , 200px);
}

因为max不是有效的CSS函数(浏览器不支持(，所以浏览器不会更改并替换宽度值，而是保留宽度属性的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)))"))