According to w3schools, the syntax of outline
is:
outline: <color> <style> <width>;
and either of the three can be missing.
And the value inherit
is a valid value of either three, or a single outline: inherit
means that it should inherit all three.
I'm asking this because I'm working on property optimizer for a CSS minifier. According to the above link,
outline: inherit none 3px
is equivalent to outline: inherit 3px
, and
outline: invert inherit 3px
is also equivalent to outline: inherit 3px
,
but the result seems too ambigous.
So the question is, how do browsers interpret outline: inherit 0px
? Do they assign inherit
to the color or the style?
It is ignored. This is current browser practice and the intended principle in CSS: for a shorthand notation like
outline
, the keywordinherit
is allowed as a value (making all the sub-properties inherited), but not in conjunction with any other value. The reason is rather obvious: otherwise the value would not have an unambiguous interpretation. In the valueinherit 0
, the value0
can only be a value foroutline-width
, butinherit
could be a value foroutline-style
oroutline-color
.The principle is mentioned in an appendix of the CSS 2.1 specification, at C.3.1. In theory, appendix C is an informative description of changes, not normative, and here it does not reflect an actual change. That is, this was goofed up: the intent was described, but normatively CSS 2.1 does not have this principle and would regard
outline: inherit 0
as valid (but the W3C CSS Validator rejects it). Cf. to Is this font: shorthand property syntax valid? (My reading of the spec says yes, but half of my installed browsers disagree.) (which deals with the same issue regarding thefont
shorthand).If you want all
outline
properties to be inherited but width set to zero (which would be somewhat odd), you need two declarations