The values initial, revert, revert-layer and unset.

Note: These four values can be applied to all properties, including the all property.

initial
revert
revert-layer
unset

Summary of characteristics of the initial value

Quick description
Restores a property to its original value.
Status
Standard
W3C Module
CSS Cascading and Inheritance
References (W3C)
 🡇  
 🡅  
Document status: CR (Candidate Recommendation)
Document status: CR (Candidate Recommendation)
Document status: REC (Recommendation)

Présentation générale de ces quatre valeurs.

The initial value.

The value initial resets a property to its original value, i.e. before applying all style sheets, including the browser stylesheet.

The initial values are defined in the W3C standard. In principle, they are therefore not browser-dependent.
Initial values are never inherited.

The revert value.

The revert value returns a property to the value set by the browser's internal style sheet. revert therefore overrides the effect of any CSS rules defined by the developer on this property.

revert can return the inherited value while initial cannot.

The revert-layer value.

revert-layer undoes any changes made to the value of the property in that same cascade layer. Changes made in another cascade layer remain valid.

For a more detailed explanation of cascade layers, refer to this tutorial at cascading layers.

The unset value.

The unset value resets the property to the initial value unless the browser style sheet sets the value inherits. In this case, unset retrieves the inherit value.

Comparing the behavior of initial, revert, and unset values.

The behavior of these three values can also be schematized by the following table:

initial revert unset
Values defined by
the developer's stylesheet.
Values set by
the browser stylesheet.		 inherit Value
Initial values
(defined by the W3C).		 initial initial initial initial

Examples.

Example 1.

The example shows how the three values initial, revert, and unset behave on a property set to the value inherited by the browser. We chose the font-size property.

The texts in this block have a size set to small.

No change in font size.
Here's a link whose font-size property has not been changed: its value is therefore defined by the browser's internal style sheet, either for this property, the value inherit. The characters in the link are effectively the same size as those in the parent (the paragraph in which the link is included).

Applying the initial value.
This link has its font-size property set to the initial value. We can see that the characters in the link have not recovered the size of the paragraph text. Indeed, the initial value of font-size is medium.

Applying the value revert.
The font-size property of this link has been set to revert. The value set by the browser's style sheet is therefore rendered, i.e., for this property, it is the value inherits.

Applying the value unset.
The font-size property of this link has been set to unset. Since the browser style sheet sets the inherit value for this property, it is this value that is retrieved by unset.

Example 2.

This second example shows how the three values initial, revert, and unset behave on a property that the browser does not set to inherit. We chose the background-color property.

For the background-color property we see that the three predefined values finally return the same value: the initial value which is transparent.

The background color of this parent block has been set to #ffff1c.
Note: Overflowing the internal blocks allows you to distinguish the background color of the parent's background color.

Applying the value initial.
The background color has been set to initial.

Applying the value revert.
The value revert has been applied to the background-color property. We should therefore retrieve the value defined by the browser in its internal style sheet, but the browser does not define nothing: we therefore return to the initial value.

Applying the value unset.
The background color has been set to unset. As long as the browser has not forced this value to inherit, it is the initial value that is retrieved, i.e. transparent.

Browser support (compatibility).

The four values initial, revert, unset, and revert-layer are well recognized by browsers.

1
initial
value
2
revert
value
3
revert-layer
value
4
unset
value
Estimated overall support.
98%
96%
95%
97%

Browsers on computers :

Mobile browsers :

Outdated or marginal browsers :

Internet Explorer

QQ Browser

Safari sur IOS

Firefox pour Androïd

Opéra Mobile

Baidu Browser

KaiOS Browser

UC Browser pour Androïd

Opéra

Safari

Firefox

Chrome pour Androïd

Samsung Internet

Chrome

Edge

Androïd Brower

Opéra mini

See Caniuse.com for more compatibility information.
Caniuse
Caniuse
Caniuse
Caniuse

Values history initial.

See also, about values.

The CSS specifications published by the W3C are organized into modules. The values initial, revert, revert-layer, and unset are part of the CSS Cascading and Inheritance module.
The following definitions are also described in this same module.

Properties:

all
Initialize all properties.

At-rules:

@import
Langue française
Importing a style sheet.
@layer
Langue française
Defines cascade layers to help manage priorities between CSS rules.

Values:

!important
Makes a rule priority over all others.
inherit
Sets a property to the same value as the parent element.
revert
Sets a property to the value set by the browser.
revert-layer
Restores a property's value to the value it had in the previous layer.
unset
Gives a property the value it would have had if no style had changed it.