1

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?

Venemo
  • 18,515
  • 13
  • 84
  • 125
  • 3
    Please don’t link “according to W3C” with w3schools.com _ever_ – because: http://www.w3fools.com/. And as for the question itself: What is the result of your own testing in different browsers? – CBroe Feb 16 '14 at 11:09
  • 1
    @CBroe I fully agree with you, specially because as you can see people start mixing up the World Wide Web Consortium (W3C) and this third party site. – idmean Feb 16 '14 at 12:13
  • 1
    Never mind the confusion between W3C and W3Schools - where does W3Schools even say that "the value `inherit` is a valid value of either three"? – BoltClock Feb 16 '14 at 12:38
  • Sorry, I was under the impression that w3schools is somehow related to the W3C. – Venemo Feb 16 '14 at 14:35

2 Answers2

7

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;
Community
  • 1
  • 1
Jukka K. Korpela
  • 195,524
  • 37
  • 270
  • 390
  • Thank you Jukka for your answer, I wasn't aware that `inherit` couldn't be used inside shorthand declarations. – Venemo Feb 16 '14 at 16:38
0

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.

user31782
  • 7,087
  • 14
  • 68
  • 143