Closed Bug 1448685 Opened 7 years ago Closed 7 years ago

CSS inspector shows explicitly inherited rules as disabled

Categories

(DevTools :: Inspector, defect)

Product:
DevTools
Component:
Inspector
Type:
defect
Priority:
Not set
Severity:
normal

Tracking

(Not tracked)

Status:
RESOLVED INVALID

People

(Reporter: mqudsi, Unassigned)

Details

User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:60.0) Gecko/20100101 Firefox/60.0 Build ID: 20180312152746 Steps to reproduce: Given HTML as follows: ``` <div class="foo"> ... </div> ``` and the following CSS: ``` div { font-family: Comic Sans MS; } ``` ``` div.foo { font-family: inherit; } ``` Select the `div.foo` node in the DOM explorer and look at the CSS rules (not computed) inspector. Actual results: The CSS inspector shows the font-family rule for `div` - which IS used to compute the font-family of the element - with a strikethrough in the same vein as an ignored/deleted/overridden rule. Expected results: Given that this is the CSS responsible for the element's font-family style property, it should not have a strikethrough.
CSS2.x, section 15.3 Font family: the 'font-family' property https://www.w3.org/TR/CSS21/fonts.html#font-family-prop https://www.w3.org/TR/CSS22/fonts.html#font-family-prop states that 'font-family' is by default inherited. In other words, your selector div.foo {font-family: inherit;} is not needed, not necessary, not required. The div.foo had already the 'font-family' assigned to "Comic Sans MS". The inheritance (or, if you prefer, the cascade) already exists by default. Now, if you insist to declare div.foo {font-family: inherit;} then this becomes a *_redeclaration_* and can be interpreted as a *_redeclaration_* which must override the default inheritance which existed already. Any redeclaration makes the previous declaration overriden and therefore ignored. " if two declarations have the same weight, origin and specificity, the latter specified wins. " CSS2.x, section 6.4.1 Cascading order https://www.w3.org/TR/CSS21/cascade.html#cascading-order https://www.w3.org/TR/CSS22/cascade.html#cascading-order - - - - - - Other mainstream browsers' (Opera 53, Chromium 64+) developer inspection tool do the same when there is a redeclaration like that. The initial declaration is striken and the redeclaration is not. I can upload a test if we need to. I'm afraid this bug is not a bug at all.
Component: Untriaged → Developer Tools: Inspector
OS: Unspecified → All
Hardware: Unspecified → All
Any time a declaration is striken (without a yellow triangle), then this means that such declaration is redeclared elsewhere: it is reset. Very often, the CSS style sheet can be made more compact, optimized by eliminating resetted declarations, redeclarations. Redeclarations and not using, not relying on inheritance for properties that inherit are unnecessary CSS code, unneeded code, not optimized code. If a declaration is striken with a yellow triangle appended, then this usually means that the property is not implemented (vendor-prefix or wrongly edited or inexistent, or with an invalid or inexistent value). I'm resolving this as INVALID
Status: UNCONFIRMED → RESOLVED
Closed: 7 years ago
Resolution: --- → INVALID
Version: 60 Branch → Trunk
I understand what you are saying, @Gérard. However, consider that a) there are cases where "inherit" _does_ serve a purpose (example to follow), and b) a stricken rule is a rule whose content does not affect the node in question. For example, ``` <html> <head> <style> html { font-family: Courier New; } div { font-family: Comic Sans MS; } div.special { font-family: inherit; } </style> </head> <body> <div> test1 </div> <div class="special"> test2 </div> </body> </html> ``` Here, the `inherit` rule is NOT spurious and may not be optimized out of the code. The important point here is that the rule "font-family: Courier New" HAS MEANING to the div.special node. For it to appear stricken through implies that this rule is deactivated. Here's a common example: you open the CSS inspector to see which rule is providing the styling for a node. Which rules do you look at, the stricken ones or the regular text ones? You won't find an "enabled" rule in the CSS inspector with "font-family: Courier New" because Firefox is marking it the same way it marks rules that have absolutely zero effect on the node in question. I am filing this with the Chrome team too, fwiw.
> The important point here is that the rule "font-family: Courier New" HAS MEANING > to the div.special node. Its computed value is what is inherited. That does not mean there is no redeclaration occuring or that a more specific selector is not involved. > For it to appear stricken through implies that this rule > is deactivated. The "font-family: 'Courier New'" declaration does not apply although its computed value is what's inherited. In the computed tab of Inspector tool (Firefox 52.7.3 ESR), the rule is not stricken but it is dimmed. Opera 53 and Chrome 64 will strike it in both the style and computed tabs but they will indicate the specified value "Courier New". All browsers will even indicate the resulting used and actual value (see "Rendered Fonts": I do not have Courier New installed on my operating system). - - - - - - The div.special /* a=0 b=0 c=1 d=1 -> specificity = 0,0,1,1 */ is more specific than the div /* a=0 b=0 c=0 d=1 -> specificity = 0,0,0,1 */ selector. So, in your example, the div selector is also stricken because it is less specific and overriden. The same specificity precedence or override mechanism applies to the html selector. > example: you open the CSS inspector to see which rule is > providing the styling for a node. Which rules do you look at, the stricken > ones or the regular text ones? The non-stricken ones are the ones that apply. This helps visually orient webpage developers examining their CSS code and the resulting effects applying to elements. Personally, I think this is a well-designed feature. When I examine one of my own webpages, I try to remove as many as possible redeclared, redefined declarations to optimize code. > You won't find an "enabled" rule in the CSS > inspector with "font-family: Courier New" The specified value applying states "Courier New" in Opera 53, Chrome 64 and Firefox 52.7.3. I have included 2 screen shots in your example: http://www.gtalbot.org/BugzillaSection/Bug1448685-font-family-inherit-redeclaration-02.html > because Firefox is marking it the > same way it marks rules that have absolutely zero effect on the node in > question. The declaration does not apply. But its computed value can be inherited. It's tricky but it's like that.
> The declaration does not apply. But its computed value can be inherited. But the computed value _ of its parent _ is what will be inherited in your example.
Product: Firefox → DevTools
You need to log in before you can comment on or make changes to this bug.