Question

对于显然支持的属性，Edge中的

CSS.supports（）错误返回。

console.log(CSS.supports("( filter: blur(20px) )"));
console.log(CSS.supports("filter", "blur(20px)"));
console.log(CSS.supports("( backdrop-filter: blur(20px) )"));
console.log(CSS.supports("backdrop-filter", "blur(20px)"));

日志：

true
true
false
false

最后两个错误，因为backdrop-filter实际上在Edge中工作。

但是这可以按预期工作：

@supports (backdrop-filter: blur(20px)) {
    body { border: 20px solid red; }
}

我是否缺少某些东西，或者CSS.supports在Edge中损坏了？以及如何检测对backdrop-filter的支持？

Answer 1

Microsoft Edge不支持无前缀的backdrop-filter属性；它仅支持-webkit-backdrop-filter。

如果您的CSS可以正常运行，则可以在运行时以-prefix-free之类的脚本作为前缀（尽管不知道-prefix-free本身不支持backdrop-filter），或通过诸如Autoprefixer之类的东西进行后处理，静默添加-webkit-前缀。

Answer 2

根据下面的文档，当前CSS Backdrop Filter仅在MS Edge浏览器中支持-webkit-前缀（不包括-ms-）。

CSS Backdrop Filter

由于这个原因，它返回false。

Edge中的CSS.supports对于支持的项目错误返回

2 个答案: