New issue
Advanced search Search tips
Note: Color blocks (like or ) mean that a user may not be available. Tooltip shows the reason.

Issue 638817 link

Starred by 3 users

Issue metadata

Status: WontFix
Owner:
Last visit 29 days ago
Closed: Dec 2017
Cc:
Components:
EstimatedDays: ----
NextAction: ----
OS: Windows
Pri: 2
Type: Feature



Sign in to add a comment

feature request: have DevTools element styles show selector specificity

Reported by tychogro...@gmail.com, Aug 18 2016

Issue description

UserAgent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/54.0.2826.0 Safari/537.36

Steps to reproduce the problem:
1. Open DevTools
2. Go to elements tab
3. Check a CSS rule in styles

What is the expected behavior?
If I may replaced 'expected' with 'desired', I'd find it nice if style selectors would show their CSS specificity value as well (be it in a tooltip), to make one more aware of which styles would override others, and how much would need to be changed to turn the tides.

What went wrong?
Nothing. This just isn't implemented yet.

Did this work before? No 

Chrome version: 54.0.2826.0  Channel: canary
OS Version: 10.0
Flash Version: Shockwave Flash 22.0 r0
 
Labels: -Type-Bug Type-Feature
Status: Untriaged (was: Unconfirmed)
Marking it as untriaged to get more inputs from dev team as it is feature request.

Comment 2 by l...@chromium.org, Aug 19 2016

Cc: paulir...@chromium.org pfeldman@chromium.org l...@chromium.org
Owner: lushnikov@chromium.org
Status: Assigned (was: Untriaged)
Thanks for the request tychogrouwstra@.

@Others, how possible is this?
It's possible: https://cs.chromium.org/chromium/src/third_party/WebKit/Source/core/css/CSSSelector.cpp?sq=package:chromium&dr=CSs&rcl=1471618369&l=95

But I'm not really convinced this would help. The ordering we do in SSP already indicates what styles override, which is a higher quality signal than just specificity on its own.

But maybe there's a usecase I'm not thinking of where specificity would communicate something that would help when the rule sorting doesn't.
I'll agree that the ordering is pretty intuitive, which makes it great.
When intending to override existing rules though, I'd imagined that info on
specificity values might make this intuition a bit more concrete.
The way I'd been thinking about this was when the user would like to add a
style rule so as to override existing competing rules. This inherently
involves a trade-off: you'd want to ensure the overriding style would have
a higher specificity, while preferably not making it so specific as to
become fragile in case of future changes, so preferably not much more
specific than necessary.
I wouldn't want to suggest cluttering the UI though; hence the idea of
putting it in a tooltip perhaps.
Status: WontFix (was: Assigned)
The specificity by itself wouldn't help much: users would need to know how to change it. This would require understanding of specificity calculatation.

Closing this for now.

Sign in to add a comment