Day 63: explicit defaulting with inherit, initial, unset, and revert

There are several CSS-wide property values you can use to specify a particular defaulting behavior for a property explicitly.

Okay, okay, I know, these keywords aren’t new at all, except for revert maybe which is newish, but if I want to write about revert-layer, which is brand new, I need a basic understanding of all keywords. Also, I had the feeling that most of you, like me, don’t know what all of these keywords do, and I was right. At least, if you want to trust this poll on Mastodon.

Our baseline

We’ll work with the following example. We have a <div> with a 1px solid green border, a red text color, and a 10px margin. Nested in the div is a <h2> with a blue text color.

<div>
  <h2>standard</h2>
</div>

div {
  color: red;
  border: 1px solid green;
  margin: 10px;
}

h2 {
 color: blue;
}

Now, let’s apply keywords to the border, color, and margin property on the <h2> and see what happens.

inherit

h2 {
  border: inherit;
  color: inherit;
  margin: inherit;
}

inherit is pretty straight-forward. The <h2> inherits all defined properties from its parent element.

initial

h2 {
  border: initial;
  color: initial;
  margin: initial;
}

initial sets the value of the property to its initial value. Each property has an initial value, defined in the property’s definition table. For example, if you look at the color property in the specification, you see that the defined initial value in the definition table is CanvasText.
The initial value is not the default value of the property defined in the user agent (browser). For example, the default margin of the body in most (all?) browsers is 8px, but the initial value of the margin property is 0.

unset

h2 {
  border: unset;
  color: unset;
  margin: unset;
}

unset resets a property to its inherited value if the property naturally inherits from its parent, and to its initial value if not. In our example, it inherits the color from the parent <div> and sets the border and margin to its initial value.

revert

h2 {
  border: revert;
  color: revert;
  margin: revert;
}

revert resets a property to its inherited value if the property naturally inherits from its parent. In our example, it inherits the color from the parent <div>. If the property is not an inheritable property, revert rolls back the cascaded value to a previous level. If there are user-agent or user default styles, it sets the property to the default value. In our example, it sets the margin of the <h2> to its user-agent default value of 0.83em. If there are no default styles, it sets the value to its initial value. This applies to the border properties in our example.

<hr>

<p>My blog doesn’t support comments yet, but you can reply via <a href=’mailto:blog@matuzo.at?subject=Comment%20on%20%E2%80%9CDay%2063%3A%20explicit%20defaulting%20with%20inherit%2C%20initial%2C%20unset%2C%20and%20revert%E2%80%9D’>e-mail</a>.</p>