Show un-matched CSS rules that would have matched if they had been supported on Firefox
Categories
(DevTools :: Inspector: Rules, enhancement, P3)
Tracking
(Not tracked)
People
(Reporter: pbro, Unassigned)
References
(Blocks 1 open bug)
Details
Attachments
(5 files)
devtools screenshot
This feature request came from the Mozilla WebCompat team. The goal for it is for certain *rules* to appear in the rule-view crossed-out, just like unsupported properties do, if we know that they might have matched if some CSS feature were supported by Firefox. For instance, today, if you have a CSS rule that contains a property that is supported by Chrome by not Firefox (say -webkit-foo), then that property is shown as part of the rule, but is cross-out, as invalid. Now, the idea is to do the same for entire rules which we know would be supported on that specific element, in other browsers. Here's a specific example (from https://developer.mozilla.org/en-US/docs/Web/CSS/::-webkit-scrollbar) HTML: <div class="mostly-customized-scrollbar">some content</div> CSS: .mostly-customized-scrollbar::-webkit-scrollbar { width: 5px; height: 8px; background-color: #aaa; /* or add it to the track */ } .mostly-customized-scrollbar::-webkit-scrollbar-thumb { background: #000; } Now, none of these rules will apply on Firefox because the ::-webkit-scrollbar (and thumb) pseudo-elements aren't supported there, and so those rules don't apply to the element. But it seems like it would be helpful to the WebCompat team if those rules did appear in the rules-view, but crossed-out.
|
Reporter | |
Updated•5 years ago
|
|
||
Comment 1•3 years ago
|
||
The Compatibility panel seems like a good place to implement such thing I guess ?
At the moment, it doesn't highlight the issue from Comment 0, but we could go other the cases which are not supported and fix them?
What do you think Karl?
|
||
Comment 2•3 years ago
|
||
Let's take this as an example
data:text/html,<!doctype html><head><meta charset="utf-8"><style>div::-webkit-scrollbar{width:5px;height:8px;}div::-webkit-scrollbar{background-color:gold;}</style></head><div style="overflow:scroll;height:30px;font-size:30px;outline: 1px dotted pink">some content</div>
This is what we currently get. See screenshot.
The compatibility panel could indeed display it. I wonder what daisuke thinks about it.
Currently it is hard to discover that there is something specific.
Maybe one issue with the compatibility panel is the cognitive load of looking at two places.
Let's have another screenshot.
|
|
||
Comment 3•3 years ago
|
||
Let's use
data:text/html,<!doctype html><head><meta charset="utf-8"><style>p{display:flex;}div,p {display:-webkit-flex}</style></head><div>some content</div><p>some content</p>
Currently when a -webkit-flex property is understood by Firefox, we get a visualization of the property.
|
|
||
Comment 4•3 years ago
|
||
|
|
||
Comment 5•3 years ago
|
||
|
|
||
Comment 6•3 years ago
|
||
Safari and Edge devtools surface the unknown properties.
|
||
Comment 7•3 years ago
|
||
Yeah, as you said, I think it better displays such unsupported values in the compatibility panel.
As you can see the screenshot, in fact, the panel shows CSS property unsupported by Firefox but supported by other browsers (-webkit-touch-callout). But does not show unknown properties.
For pseudo element name -webkit-scrollbar and CSS value -webkit-flex, since what the compatibility panel supports is only CSS property, it can’t show now. I'm sorry!
For pseudo element name, the rule view shows unknown/unspported CSS properties as well, and marks as invalid property name. If we keep the compatibility with this, it may be better to show -webkit-scrollbar in the pseudo section, then we may want to indicate that it is not applied?
|
||
Updated•2 years ago
|
Description
•