Closed Bug 977098 Opened 11 years ago Closed 2 months ago

Show CSS Specificity somewhere around selectors

Categories

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

enhancement

Tracking

(relnote-firefox 128+, firefox128 fixed)

RESOLVED FIXED
128 Branch
Tracking Status
relnote-firefox --- 128+
firefox128 --- fixed

People

(Reporter: bgrins, Assigned: nchevobbe)

References

Details

(Keywords: DevAdvocacy)

Attachments

(1 file)

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
Product: Firefox → DevTools
Severity: normal → S3

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

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

Assignee: nobody → nchevobbe
Status: NEW → ASSIGNED
Pushed by nchevobbe@mozilla.com:
https://hg.mozilla.org/integration/autoland/rev/9d78a94d87ee
[devtools] Show selector specificity in Rules view. r=devtools-reviewers,ochameau.
Status: ASSIGNED → RESOLVED
Closed: 2 months ago
Resolution: --- → FIXED
Target Milestone: --- → 128 Branch

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

Flags: needinfo?(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.

relnote-firefox: --- → ?
Flags: needinfo?(nchevobbe)

Added to the Fx128 relnotes.

You need to log in before you can comment on or make changes to this bug.

Attachment

General

Created:
Updated:
Size: