How to query for paint-order support on HTML elements with @supports?

user_3909202 0
Viewed 78

Using paint-order and text-stroke (or the prefixed -webkit-text-stroke), one can achieve also boldly stroked texts in Firefox and Safari.

Example:

h1 {
  -webkit-text-stroke: 5px red;
        paint-order: stroke fill;
}
<h1>Text With Outline</h1>

In Chrome, this does not work, as it supports paint-order only on SVG elements. Now, my question: how can I query for the paint-order support on ordinary HTML elements? I want to use text-shadow as a fallback, but using e.g.

@supports not ((paint-order: stroke fill) and (-webkit-text-stroke: 5px $color)) {
        text-shadow:
            0 0 0.1em $color,
            0 0 0.25em $color,
            0 0 0.5em $color;

}

does not work, as Chrome reports paint-order: stroke fill to be supported (because it is, but only on SVG). How do I have to adjust the rule to make this distinction and get the fallback working with CSS's @support?

css
0 Answers
Related