0

Consider the following demo:

a {
  outline: initial dotted 2px;
}

.two {
  
  outline-style: dotted;
  outline-width: 2px;
  outline-color: initial;
}
<a href="#!">hello</a>

<br>
<br>

 <a href="#!" class="two">hello2</a>

The first anchor tag doesn't get any outline. The dev tools say it's an invalid property value. The same goes for inherit. Why is that?

user31782
  • 7,087
  • 14
  • 68
  • 143
  • initial will go (cover) for every values in that case of a shorthand syntax . try with two values `outline: initial unset red` ... initial and unset are supposed to match which style, size or border ? – G-Cyrillus Sep 17 '21 at 11:35
  • @G-Cyrillus According to [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/outline#formal_syntax) initial should match `outlne-color` and `unset` should match `outline-style` – user31782 Sep 17 '21 at 11:45
  • not really https://developer.mozilla.org/en-US/docs/Web/CSS/initial I understand this what we would expect, but in reality it works otherwise unfortunately. maybe a use case not implemented or clear enough. – G-Cyrillus Sep 17 '21 at 11:46
  • It can be applied to any css property but your order in `outline: initial unset red` is invalid. First property has to be outline color and last has to be `outline-width`. `red` is not correct for `outline-width` – user31782 Sep 17 '21 at 11:48
  • I think I am misinterpreting the MDN order `||`. – user31782 Sep 17 '21 at 11:51
  • I agree we would expect it to work that way, but obviously it does not :( – G-Cyrillus Sep 17 '21 at 11:51
  • @G-Cyrillus Can outline have both orders: `outline: – user31782 Sep 17 '21 at 11:53
  • looks like a good duplicate to me ;) inherit,unset,initial,revert have a similar way to be applied, i believe. – G-Cyrillus Sep 17 '21 at 11:55
  • if you follow the official syntax: https://drafts.csswg.org/css-ui-3/#outline you will find that initial cannot be a value there. initial can only be a value **alone** applied to the property. It's a special value that apply to the whole property and can never be a part of its value – Temani Afif Sep 17 '21 at 15:35
  • here is the syntax of color value: https://www.w3.org/TR/css-color-4/#typedef-color .. again, you will never find initial there because initial is not a `` value. it's a value that can apply to the `color` property (note the difference between `` as value and `color` as property) – Temani Afif Sep 17 '21 at 15:37

0 Answers0