We got an experiment for preview in DevEdition that we hope makes cross-browser development easier.
The new Compatibility side-panel in Inspector shows which CSS declarations are unsupported in certain browser versions. It’s powered by MDN’s browser compatibility data.
Click each property to learn more on MDN and customize the supported browsers in settings.
We are especially interested in how correct and actionable the results are. Give it a try and let us know how it goes!
I tried it recently and I was confused what the icons were for: do they indicate an issue in the pictured browser? If so, putting them in a warning/error color could help IMO.
Maybe we could also show the supported browser at the same time for a given property warning? (so you could clearly see: this is supported in latest Firefox and Chrome, but not IE11)
I recognized that I had the same mental model error when scanning the list. As in MDN and most other contexts the icons mean support and not lack of support.
I’d understand though that marking a whole rows of icons in 
red also needs to be balanced – maybe a hint of red is enough (as those are warnings).
Expanding the scope would add a sense of severity for a property, similar to what WebHint added. Progressive enhancement properties could be yellow or and critical ones could be red. This would not come for free from the MDN data and would need to be maintained, per this discussion in the MDN data repo.
Just came to know about this feature from web.dev live 2020 event. So much excited to have such a tool. Using firefox for more than a decade and always felt great.
