The compatibility team really like the tooltip but thought it could be more visible, for example by having a solid background color.
We also need to see how this interact with "invalid" CSS values which already have a warning icon

(In reply to Nicolas Chevobbe [:nchevobbe] from comment #0)

The compatibility team really like the tooltip but thought it could be more visible, for example by having a solid background color.

Do you mean the icon for the tooltip should have a background color? I think the tooltip itself has a background color (at least it had when I tested last week)

We also need to see how this interact with "invalid" CSS values which already have a warning icon

At the moment both icons are displayed next to each other. Is this an issue?

(In reply to Julian Descottes [:jdescottes] from comment #1)

Do you mean the icon for the tooltip should have a background color? I think the tooltip itself has a background color (at least it had when I tested last week)

Sorry, I should have been clearer. What I meant here is that the icon is easy to miss and it could help if it had a solid background color (so it would look more like a badge/pill). I guess we could use the same yellow we're using for the "invalid property" warning icon.

We also need to see how this interact with "invalid" CSS values which already have a warning icon

At the moment both icons are displayed next to each other. Is this an issue?

I think it's okay for now. If we make the background of the icon solid, it might be not ideal as they would clash a bit? Also, in case where the rule is plainly disabled because it's not supported in Firefox, it feels a bit redundant
The warning icon tooltip says: invalid property name, but then the compatibility icon brings some additional information, saying it's not supported in Firefox but is in other browsers.
Ideally, in such case we'd only have one icon, and the ruled-out style would make it clear that this is not supported in Firefox.