Some sites have some Unicode characters show in multi-color without apparent CSS in Chrome V8 and FF: how is this done?

Question

See for example: http://unicode.org/reports/tr18/#Individually_Named_Characters where the two 'alien' Unicode characters appear in green color(s), at least in latest Chrome and FireFox.

The same page section is all black&white in MSIE Edge - nothing alien green there.

CSS/Page inspection doesn't produce any obvious suspects in answering how this is pulled off, so if anyone can give a hint (or two) how to reproduce this?

The obvious google searches delivered zip, nada, zilch so either my google fu is sleeping in the gutter or ... anyway, cannot find how this was done using my usual methods.

Answer 1

The rendering of UTF emojis is platform / vendor specific. There is no CSS or other tricks involved. Different vendors (Apple, Google, Microsoft, Mozilla, Samsung etc.) simply chose to provide different icons for these UTF characters.

In Chrome on a Mac, for example, the two alien characters you linked to do not appear in green. This is what they look like:

Note that a specific rendering engine could take precedence over the host OS emojis and display its own set of icons. This is most likely what you experienced when using MSIE Edge.

Emojipedia gives you a good idea of what each Emoji looks like for each vendor.