Show support as 🟩, 🟨, or 🟥

I also suggest to move the supported data from background ti a green bullet so It Is more flexible and It can be moved around and It Is as the same level of the texts (the name of the browser and the version).

_Originally posted by @mattiapontonio in https://github.com/mdn/yari/issues/1747#issuecomment-729701307_

[ghost]

It’s not easy, it’s complex. It also depends on how data are modelled and comes from BE or Web Service. Anyway my notes are:

• Use another table
• Do not use hidden content
• Do not use * because is hard to read
• true|false may become a red|green bullet or some emoji

Example

Browser compatibility notes

Property	Browser	Version	Note	Supported
flex-shrink	Firefox	20	Since Firefox 28, multi-line flexbox is supported.	✅
flex-shrink	Firefox	20	Before Firefox 32, Firefox wasn’t able to animate values starting or stopping at 0.	🔴
flex-shrink	Firefox	49	-X- prefix	✅
…	…	…	…	…

[ghost]

@Ryuno-Ki yes We definitely Need a Component so a custom class that owns a text and a color 👍 in our V of our MVC…