Closed Bug 1006010 Opened 9 years ago Closed 6 years ago

Design quick compatibility data marker on top of pages


( Graveyard :: BrowserCompat, defect)

Not set


(Not tracked)



(Reporter: Jeremie, Unassigned)




(Whiteboard: [bc:kuma][bc:milestone=spaceship])


(2 files)

While writing the compatibility data requirements, one of the most requested feature from users were the possibility to have some quick and simple markers on top of each pages to know which browser is supporting the features describe on the pages.
+1 for this - I've seen quite a few requests for this too. I created a support info ribbon mockup, to give form to my thoughts on the subject:
I've done some thinking about this for Bug #1019880. 

There's a couple problems I haven't been able to solve :(
- The logo for the desktop and mobile version of some browsers is the same.
- The logo for some browsers is not recognizable.

This means I haven't found a good way to avoid actually writing out the browser's name.
Attached image The problem with icons
Here's an illustration of the problem with just icons.
Here's a potential solution that still needs some work (check and cross are not good for localization).
I tend to agree that if we want some fine grain information, icon are very limited. However, a very rough signal such as those use on could be good enough in many cases.

Actually the question is how far do we want to go in term of accuracy for our summarized information at the top of the page? (this is a open question, everybody is encourage to provide feedback).
I think we absolutely need version numbers at the top. Saying IE is supporting something means nothing. People want to know at a glance if it is first supported by IE8 or IE11. It is a critical information for a Web dev.

Then we need to make sure that people understand that the granularity of information there is limited and that for specific features (like a specific attribute (e.g. srcset on <img>)) they need to get to the detailed information at the bottom.

We should add a link there with an evocative text.

Also an important piece of information nowadays for API are the context where they can be used:
Web page (Window context, in regular browsing or when prefetching), Workers (either Dedicated, Shared, Service or the non-standard Chrome). 

Finally for FxOS, the certified/privileged/regular apps info is also very important.

All this need to appear in the quick compat markers.
I agree that version numbers are important. I also think that having this information available up the top for an "at a glance" summary is very useful, and is definitely better than not having it (the way of doing things is still useful, albeit a bit limited.)

I like Stephanie's new proposed solution. So could we add version numbers to that, where the version number is significant?


Desktop FxOS Android

Could mean "supported for a long time now in all Firefox browsers"


Desktop 33 FxOS (No) Android 33

Would mean only supported as far back as Gecko 33, but not enabled on FxOS.

For IE, even versions as far back at 6 could still be significant

Internet Explorer
Desktop 6 Mobile ?

A ? could be used where version number is potentially significant but unknown.

cross and tick are not great internationally. How about using some kind of system where supported stuff is full opacity, and unsupported stuff is slightly shaded out? This increasingly seems to be a de facto standard these days.
Component: General → BrowserCompat
Severity: enhancement → normal
Summary: [Compat Data] Design quick compatibility data marker on top of pages → Design quick compatibility data marker on top of pages
Whiteboard: [specification][type:feature] → [specification][type:feature][bc:kuma]
Whiteboard: [specification][type:feature][bc:kuma] → [bc:kuma][bc:milestone=spaceship]
The BrowserCompat project is canceled.  See for current effort. Bulk status change includes the random word TEMPOTHRONE.
Closed: 6 years ago
Resolution: --- → WONTFIX
Product: → Graveyard
You need to log in before you can comment on or make changes to this bug.