977098 - Show CSS Specificity somewhere around selectors

Status: NEW

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

Description

[Brian Grinstead [:bgrins]]

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.

Comment 1

[Patrick Brosset <:pbro>]

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.

Comment 2

[Jens]

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.

Comment 3

[Patrick Brosset <:pbro>]

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.

Comment 5

[bilge]

This should be a thing.

Comment 6

[Arun Das]

Will this ever materialize? I mean, the specificity is computed behind the scenes anyway, and all we ask is for it to be exposed.

Comment 7

[Anthony Ricaud (:rik)]

Since the last update, Chrome and Safari implemented this when you hover a selector.