mdn / yari

The platform code behind MDN Web Docs
Mozilla Public License 2.0
1.18k stars 502 forks source link

Consider improving the design for partially supported browsers in compat tables #11893

Open captainbrosset opened 1 day ago

captainbrosset commented 1 day ago

Summary

Consider the following compat table:

image

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:

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:

image

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

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

image

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

captainbrosset commented 1 day ago

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