What is use of 'initial' value in CSS?

Question

I thought that the initial value would restore initially rendered styles (as applied by a browser's internal user-agent stylesheet).

Example:

div.inline {
  display: inline;
}

div.initial {
  display: initial;
}

I expected the div.inline rule would display <div class="inline"> in inline mode, and the div.initial rule would display <div class="initial"> using a div's original display value of block.

But when I explore this, <div class="initial"> displays inline. Am I wrong? Can anyone elaborate more on this?

Here's a good explanation for initial value: http://stackoverflow.com/q/35689456/3597276 — Michael Benjamin, Mar 19 '16 at 14:30

score 62 · Accepted Answer · answered Aug 30 '13 at 18:00

62

The initial value (not attribute) denotes the initial value of the property, as defined in CSS specifications: “The ‘initial’ keyword represents the specified value that is designated as the property's initial value.” Thus, its meaning depends on the property, but not on anything else, e.g. not on the browser or on the element that the property is being applied to. So it does not mean browser default.

For example, for the display property, initial always means inline, because that’s the designated initial value of the property. In the example case, the browser default is block, since the element is div.

Thus, the initial value is of limited usefulness. Its main effect seems to be to confuse people, due to misunderstandings. A possible use case is for the color property, since its initial value is browser-dependent (mostly black, as we know, but not necessarily). For it, initial means browser default, since that’s how the property has been defined, A similar use case is for font-family: by declaring font-family: initial, you get browser’s default font (which may depend on browser settings).

The usefulness is further limited by lack of support on IE (even IE 10).

answered Aug 30 '13 at 18:00

Jukka K. Korpela

195,524
37
270
390

6

There is one very common annoying use case where `initial` is *extremely* helpful: when you hide and unhide an element programmatically, i.e. give it `display:none` then display it again. This is because there are so many values for `display`, and no defaults without `initial`. jQuery has been doing this for years, and preprocessors like LESS, Stylus & SCSS make it easier, but it's helpful that it's right in CSS. IE not having it does limit it, though, especially since the others do allow it there. – trysis Jun 19 '14 at 03:29
Sorry, got carried away there. Maybe I'll put it in an answer when I feel more productive. – trysis Jun 19 '14 at 03:32
4

@trysis: `display: initial` is a synonym for `disply: inline` when it even works at all, so that doesn't buy you much. – recursive Aug 13 '14 at 21:52
The initial value is what is used when the browser renders unrecognized or unsupported HTML elements. http://stackoverflow.com/q/35689456/3597276 – Michael Benjamin Mar 19 '16 at 14:29
@trysis, can you pls simplify it. I don't fully comprehend with what you meant by `There is one very common annoying use case where initial is extremely helpful:...`. preferably with an example..thks – b Tech Jan 03 '17 at 16:04
1

It also has the use of frustrating devs like me, that just want `2*initial` to be a thing for "twice the default value". – SarcasticSully Dec 14 '17 at 22:11
1

@trysis, I'm also confused by your comment about the "one very common annoying use case where `initial` is extremely helpful." It sounds like you're saying that "display: initial" can be used when you've hidden an element with "display: none" and then want to show it again, restoring whatever "display" property it had before you hid it. That doesn't work. It just gives the element a "display" property of "inline," regardless of whether it's a block-level element such as a
or an inline element such as a . If you're saying something different, could you please clarify?
– Dan Robinson Mar 28 '19 at 22:32
1

Sorry, I wrote that comment a long time ago, when Inwas a brand new developer. I meant `display: revert`. Unfortunately, `revert` doesn't have very good support, even now. – trysis Apr 04 '19 at 18:56
`revert` has now 93% support. @trysis – Antoine Weber Mar 27 '23 at 15:16
@AntoineWeber Yes, and it's great! Of course, even now, some clients just won't give up on IE, even years after M$ gave up on it. – trysis Mar 28 '23 at 17:30
The `revert` value is something different. It might be what people expected `initial`` to be, but the question is still about `initial` (which is a well-defined and mostly useless value). – Jukka K. Korpela Mar 28 '23 at 17:56

score 7 · Answer 2 · answered Aug 30 '13 at 13:50

7

Source

The initial CSS keyword applies the initial value of a property to an element. It is allowed on every CSS property and causes the element for which it is specified to use the initial value of the property.

/* give headers a green border */
 h2 { border: medium solid green }

 /* but make those in the sidebar use the value of the "color" property */
 #sidebar h2 { border-color: initial; }
<p style="color:red"> 
    this text is red 
       <em style="color:initial"> 
          this text is in the initial color (e.g. black)
       </em>
    this is red again
 </p>

answered Aug 30 '13 at 13:50

John Conde

217,595
99
455
496

Thanks for reply. Then what is the diff btwn `inherit` and `initial`? – NkS Aug 30 '13 at 13:52
1

`inherit` gets its value from the parent element. – John Conde Aug 30 '13 at 13:55

Mori · Answer 3 · 2022-01-09T05:38:36.390

Summary: The most common use of the initial value is to override inherited styles.

When you use an inherited property on an element, some of its descendants might be affected undesirably. To wipe out the unwanted style from those elements, use the initial value.

p {
  visibility: hidden;
}

em {
  visibility: initial;
}

<p>
  <span>This text is hidden.</span>
  <em>I don't want this text to be hidden.</em>
  <span>This text is hidden.</span>
</p>

Then what's the difference between visibility and the display property, which is discussed in the OP? The visibility property can be inherited, but display cannot:

On non-inherited properties, the property's initial value may be unexpectedly different form the browser's default value. That means you need to know its initial value before you use it. Nevertheless, the computed (final) value may be different form the initial value:

p {
  display: flex;
}

a {
  display: initial;
}

<p>
  <a href="#">Link</a>
</p>

That's why I personally prefer not to use the initial value on non-inherited properties.

What is use of 'initial' value in CSS?

3 Answers3

Linked

Related