当不支持掩码时，边缘计算@supports(掩码)为true

Question

Edge不支持CSS掩码，但是下面的@supports语句计算为true，并且在边缘中应用了封闭的样式。我可以在@supports参数中添加什么以使边缘忽略条件块

​

body {
  font-family: monospaced;
  color: red;
  background-image: url(test.png);
}

@supports(mask: url("")) {
  body {
    background-color: #eee;
    font-family: sans-serif;
    color: rebeccapurple;
    mask: url(test.svg);
    mask-size: cover;
  }
}

<h3>This should be red and mono-spaced in Edge</h3>

​

Answer 1

根据边缘API文档，mask是受支持的，但由于我最终只是在寻找对掩码映像的支持，所以我可以这样做：

@supports(mask-image: url("")) {
  body {
    …
    mask-image: url(test.svg);
    …
  }
}

更干净更具体。

文档提到支持maskImage样式属性，但我无法让它工作。

Answer 2

现在Chrome (以及Chrome浏览器，如边缘)支持通过DevTools的规则，在Edge 100中可以清楚地看到，mask-image是不受支持的。

这是一个截图

​

​

使用

@supports (display: flex) or (mask-image: url("")) {}

你可以看到高亮显示的按钮有一个绿色的background-color。DevTools中的检查显示了应用的所有元素和规则--还可以(在红色框中)查看@supports规则中的background-color是如何被覆盖的。

但是，当我将规则更改为

@supports (mask-image: url("")) {}

按钮现在是橙色/黑色b/c，@supports条件不再满足。

​

​

显然，边缘不支持mask-image。