What Does the CSS `initial` Value Really Do?

Use of 'Initial' Value in CSS: Explained

The 'initial' value in CSS has been a source of confusion for many developers. It's often misunderstood as representing the browser's default style, which is not always the case.

Definition of 'Initial'

According to CSS specifications, 'initial' refers to the specified initial value of a property, as defined in the property's documentation. This value is unrelated to the browser's default style or the element's original value.

Example: 'display' Property

In the case of the 'display' property, 'initial' always means 'inline' because that is the designated initial value. In the example provided:

div.inline {
  display: inline;
}

div.initial {
  display: initial;
}

will display inline, and

will also display inline despite the default browser style for 'div' elements being block. This is because 'initial' always sets the 'display' property to 'inline'.

Limited Usefulness of 'Initial'

While 'initial' can be useful for restoring the specified initial value of a property, its usefulness is limited by the following factors:

• Confusing behavior: Its meaning varies depending on the property, unlike the 'browser default' value.
• Limited support: It is not supported in Internet Explorer (including IE 10).

Specific Use Cases

Some potential use cases for 'initial' include:

• Setting the 'color' property to 'initial' to revert to the browser's default (which may vary)
• Setting the 'font-family' property to 'initial' to use the browser's default font (which may vary based on user settings)

The above is the detailed content of What Does the CSS `initial` Value Really Do?. For more information, please follow other related articles on the PHP Chinese website!