Edge evaluates @supports(mask) as true when mask isn't supported

问题

Edge doesn't support CSS mask, yet the @supports statement below is calculating as true and the enclosed styles are being applied in Edge. What can I put into the @supports argument to get Edge to ignore the conditional block

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>

回答1:

According to the Edge API docs, mask is supported, but since I'm ultimately just looking for support of a mask image, I can do:

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

Cleaner and more specific.

The docs mention that a maskImage style property is supported, but I can't get that to work.

来源：https://stackoverflow.com/questions/49231866/edge-evaluates-supportsmask-as-true-when-mask-isnt-supported