How is `outline: inherit 0` interpreted?

Question

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?

Answer 1

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;

Answer 2

It should be noted that w3schools definition for order is not complete. All of the following are valid

outline: <color> <style> <width>
outline: <color> <width> <style> 


outline: <width> <style> <color>
outline: <width> <color> <style>


outline: <style> <width> <color>
outline: <style> <color> <width>

Because the ordering doesn't matter. This in turn becomes the reason for outline: inherit none 3px to become invalid, as 3px could signify color as well.

Similarily outline: inherit 0px is equivalent to outline: inherit initial 0px and thus could refer to outline-color: 0px.