Consider improving the design for partially supported browsers in compat tables

[captainbrosset]

Summary

Consider the following compat table:

which you can see at https://developer.mozilla.org/en-US/docs/Web/API/Popover_API#browser_compatibility

I was discussing with a colleague of mine, and we agreed that at a quick glance, it felt like the feature was supported everywhere just fine.

The reasons for this are:

• The version numbers all seem to be the same color (not to mention that some folks can't see subtle differences between colors).
• The partial support icon doesn't feel super clear.

URL

https://developer.mozilla.org/en-US/docs/Web/API/Popover_API#browser_compatibility

Reproduction steps

1. Go to https://developer.mozilla.org/en-US/docs/Web/API/Popover_API#browser_compatibility
2. Look at the browser compat table.

Expected behavior

I would expect to visually see the lack of complete support on Safari for iOS much more clearly/quickly. It takes me a minute to scan the results and figure out that, oh, it's actually not supported fully on Safari for iOS.

The problem with partial support is that in some cases a minor part might be missing and I can use an API just fine, but in other cases (like this one, where popovers don't dismiss on backdrop touch), I can't reasonably use the feature at all.

Compare to caniuse.com:

I find that it's easier to see the difference between full support and partial support here, because:

• there's more of a gap between the two background colors
• the additional stripe pattern helps differentiate as well
• there's a little square with the number 1 in the cell that helps too

Also, consider the Baseline banner at the top of the page:

The icon for Safari is much clearer about the lack of support.

Actual behavior

On MDN, the visual difference between a fully supported and partially supported browser is a bit too subtle, and the icon doesn't fully convey the status.

Validations

• I have read the Community Participation Guidelines.
• I have verified that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• I have checked that this is a concrete bug. For Q&A open a GitHub Discussion.

[captainbrosset]

If the little icon for partial support was a bit clearer and colored, that would probably be enough.

[caugner]

We discussed this today and plan to redesign the BCD tables eventually, but don't intend to make any changes at this point.

Nevertheless, I looked how the BCD table would look like with yellow partial icons (as suggested above) and without browser icons (an alternative that came to my mind).

(We also discussed reusing Baseline iconography, but this would be part of the table redesign.)

A. with yellow partial icons

B. without browser icons

C. combining both

[caugner]

@captainbrosset In your opinion, would changing the color of the partial icon help be sufficient, or should we replace the icon instead/additionally?