当不支持遮罩时，Edge会将@supports(mask)评估为true [英] Edge evaluates @supports(mask) as true when mask isn't supported

问题描述

Edge不支持 CSS掩码，但 @supports 下面的语句计算为 true ，并且随附的样式将在Edge中应用.我可以在 @supports 参数中添加什么以使Edge忽略条件块

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>

推荐答案

根据

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

更清洁，更具体.

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

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

这篇关于当不支持遮罩时，Edge会将@supports(mask)评估为true的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！