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);
…
}
}
Cleaner and more specific.
The docs mention that a maskImage
style property is supported, but I can't get that to work.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With