Show specificity value of CSS rules

[fbugissues]

Originally reported on Google Code with ID 5037

It would be nice to see the specifity values of the CSS rules.

Reported by wagner.markus90 on 2011-12-08 14:42:42

[fbugissues]

I meant specificity, not specifity.

Reported by wagner.markus90 on 2011-12-08 14:52:11

[fbugissues]

Please read http://getfirebug.com/wiki/index.php/I_am_missing_a_feature_in_Firebug!
carefully, create a test case and make sure to provide a precise description of what
you have in mind.

Sebastian

Reported by sebastianzartner@gmx.de on 2011-12-09 07:04:52

• Status changed: NeedInfo
• Labels added: css

[fbugissues]

Reported by sroussey on 2012-01-25 07:15:03

[fbugissues]

Markus, please provide some detailed description of what you want plus a test case to
reproduce it. Otherwise we won't be able to work on it.

Sebastian

Reported by sebastianzartner@gmx.de on 2012-01-25 08:33:24

[fbugissues]

I think he wants some UI that shows the specificity of the CSS rules. Perhaps we can
put that in a tooltip.

http://www.w3.org/TR/CSS2/cascade.html#specificity

Reported by sroussey on 2012-01-25 08:39:44

[fbugissues]

It should be something like sroussey said. So I could see what to do that one css rule
overwrites another one.

Reported by wagner.markus90 on 2012-01-25 08:46:36

[fbugissues]

Ah, I see.
Markus, please next time make sure, that you explain in detail what you want. Otherwise
we can just guess.

So the current CSS3 approach would be http://www.w3.org/TR/2011/REC-css3-selectors-20110929/#specificity.

As example I use the selectors of that page:

*               /* a=0 b=0 c=0 -> specificity =   0 */
LI              /* a=0 b=0 c=1 -> specificity =   1 */
UL LI           /* a=0 b=0 c=2 -> specificity =   2 */
UL OL+LI        /* a=0 b=0 c=3 -> specificity =   3 */
H1 + *[REL=up]  /* a=0 b=1 c=1 -> specificity =  11 */
UL OL LI.red    /* a=0 b=1 c=3 -> specificity =  13 */
LI.red.level    /* a=0 b=2 c=1 -> specificity =  21 */
#x34y           /* a=1 b=0 c=0 -> specificity = 100 */
#s12:not(FOO)   /* a=1 b=0 c=1 -> specificity = 101 */

The web dev tools already return this info:

http://dxr.mozilla.org/mozilla/mozilla-central/browser/devtools/styleinspector/CssLogic.jsm.html#l1449

So we should reuse it, if possible.

Sebastian

Reported by sebastianzartner@gmx.de on 2012-01-25 12:38:59

• Status changed: Triaged
• Labels added: Type-Enhancement, Test-case-available

[fbugissues]

Reported by sebastianzartner on 2012-08-01 13:22:49

• Labels added: style
• Labels removed: css

[fbugissues]

Reported by sebastianzartner on 2013-03-23 14:35:25

[fbugissues]

Reported by sebastianzartner on 2013-04-04 23:38:32