For those looking to create boldly stroked texts in Firefox and Safari, using paint-order and text-stroke (or the prefixed -webkit-text-stroke) is the way to go.
Here's an example:
h1 {
-webkit-text-stroke: 5px red;
paint-order: stroke fill;
}<h1>Text With Outline</h1>In Chrome, this method won't work since it only supports paint-order on SVG elements. So, how can one check for paint-order support on regular HTML elements? The idea is to use text-shadow as a fallback by checking with CSS's @supports.
@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;
}
The issue arises when Chrome falsely reports that it supports paint-order: stroke fill (even though it does so only for SVG). How should the rule be adjusted to make the distinction and get the fallback working correctly with @support in CSS?