977098 - Show CSS Specificity somewhere around selectors

Status: RESOLVED FIXED

(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.

Comment 8

[Nicolas Chevobbe [:nchevobbe]]

Attachment: Bug 977098 - [devtools] Show selector specificity in Rules view. r=#devtools-reviewers.

The specificity is included in the selector title so it's shown on hover.

Comment 9

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/9d78a94d87ee
[devtools] Show selector specificity in Rules view. r=devtools-reviewers,ochameau.

Comment 10

[Serban Stanca [:SerbanS]]

https://hg.mozilla.org/mozilla-central/rev/9d78a94d87ee

Comment 11

[Ryan VanderMeulen [:RyanVM]]

Is this something we wanted to add to the Fx128 relnotes?

Comment 12

[Nicolas Chevobbe [:nchevobbe]]

Release Note Request (optional, but appreciated)
[Why is this notable]:
[Affects Firefox for Android]:
[Suggested wording]:
[Links (documentation, blog post, etc)]:

(In reply to Ryan VanderMeulen [:RyanVM] from comment #11)

Is this something we wanted to add to the Fx128 relnotes?

yes, would be nice

Release Note Request
[Why is this notable]: Exposed CSS rules specificity in the Inspector, which can help web developers understand why a given rules is applied before another. All the other browser's DevTools already exposed it.
[Affects Firefox for Android]: none
[Suggested wording]: CSS rules specificity (see https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity) are now displayed in a tooltip when hovering a CSS Rule selector in the Inspector Rules view. This can help web developers understand why a given rules is applied before another.

Comment 13

[Ryan VanderMeulen [:RyanVM]]

Added to the Fx128 relnotes.