Open Bug 977098 Opened 8 years ago Updated 2 months ago

Show CSS Specificity somewhere around selectors

Categories

(DevTools :: Inspector: Rules, enhancement, P2)

enhancement

Tracking

(Not tracked)

People

(Reporter: bgrins, Unassigned)

References

Details

(Keywords: DevAdvocacy)

CSS specificity can be tricky to figure out and debug, but there is a formula that can be followed for calculating it: http://www.w3.org/TR/selectors/#specificity.

It could be useful if we could help people figure out 'why' one selector shows up above the other, either by showing the final calculation or a more in depth visualization of how it was calculated.

If just showing the final calculation, maybe it could be a 'title' attribute on the selector text that shows up when hovering in the style inspector.  Or if showing more information, then maybe a tooltip.  Or, it could be some sort of marker text that shows up in the style editor next to a selector.
Awesome idea. Would certainly help a lot both in the rule-view and style-editor.
Somehow, I prefer the tooltip idea cause it would give us the needed room to show the details of the calculation.
Priority: -- → P2
Component: Developer Tools: Inspector → Developer Tools: CSS Rules Inspector
This came up again as a comment at https://hacks.mozilla.org/2016/05/css-coding-techniques/#comment-19919

> The specificity of rules always bugs me. It would really help if the dev tools 
> would show the computed specificity of a rule somewhere… Some time ago I 
> googled for it, I did not find any tool (with any browser) which lets 
> me know this rule is 0,1,2,2 but that is 0,2,0,0 So in the end you need to 
> “compute” it yourself, which is hard because as a novice you don’t 
> know the whole spec.

and there is also a link to https://specificity.keegan.st/

I think the Ruler View (https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS) should show the calculated specificity of each rule, and also maybe a link to MDN (a polished https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity) where specificity is explained. 

This would be helpful for many people, especially beginners to medium experts. No other browser has this, it could set Firefox dev tools really apart.
I found this visual calculator: http://specificity.keegan.st/
I like it. Something like this could fit nicely in a tooltip that appears on hover of css selectors.
Severity: normal → enhancement
Duplicate of this bug: 1389454
Product: Firefox → DevTools
You need to log in before you can comment on or make changes to this bug.