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 keyword inherit
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 value inherit 0
, the value 0
can only be a value for outline-width
, but inherit
could be a value for outline-style
or outline-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 the font
shorthand).
If you want all outline
properties to be inherited but width set to zero (which would be somewhat odd), you need two declarations
outline: inherit;
outline-width: 0;