Question

Edge不支持CSS mask，但下面的@supports语句计算为true，并且封闭的样式正在Edge中应用。我可以在@supports参数中添加什么来让Edge忽略条件块

＆＃13;

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;
  }
}

＆＃13;

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

＆＃13;

Answer 1

根据Edge API docs，支持mask，但由于我最终只是寻求掩码图像的支持，我可以这样做：

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

更清洁，更具体。

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

当不支持掩码时，Edge将@supports（mask）评估为true

1 个答案: