The CSS property
-webkit-text-stroke is a curious beastie.
MDN gives a big scary warning saying "Non-standard: This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web."
And yet, it works everywhere. All modern browsers support it. Except on Emoji.
Here's how it work.
-webkit-text-stroke: pink 1px; draws a pink outline around text.
This has a pink outline!
Nifty! But what happens if you apply to emoji?
Smile 😁, Star ⭐, Melon 🍈
Interestingly any emoji with default text presentation - or using Variation Selector 15 - does get an outline
Why would this be useful
Here's an emoji which has the same roughly the colour as the background. Can you see it clearly? What if you select the text?
Having an outline would make it a lot easier to see.
So, what's so special about emoji? I guess that the way browsers render emoji is more similar to images rather than text? For example, their colours don't invert when selected.
Does anyone know a way to make this work? Or whether
-webkit-text-stroke will ever be standardised?