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

posted on

It’s time to get me up to speed with modern CSS. There’s so much new in CSS that I know too little about. To change that I’ve started #100DaysOfMoreOrLessModernCSS. Why more or less modern CSS? Because some topics will be about cutting-edge features, while other stuff has been around for quite a while already, but I just have little to no experience with it.


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;
}

Feliz Navidad

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.

Feliz Navidad

h2 inherit keyword: property values
property value origin
border-color green parent
border-style solid parent
border-width 1px parent
color red parent
margin 10px parent

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.

Feliz Navidad

h2 initial keyword: property values
property value origin
border-color currentColor initial value
border-style none initial value
border-width medium initial value
color canvasText initial value
margin 0 initial value

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.

Feliz Navidad

h2 unset keyword: property values
property value origin
border-color currentColor initial value
border-style none initial value
border-width medium initial value
color red parent
margin 0 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.

Feliz Navidad

h2 revert keyword: property values
property value origin
border-color currentColor initial value
border-style none initial value
border-width medium initial value
color red parent
margin 0.83em user-agent default

See on CodePen

Further reading

Overview: 100 Days Of More Or Less Modern CSS