The values initial, revert, revert-layer and unset.
This page is also about value(s):
Summary of characteristics of the initial value
Note: These five values can be applied to all properties, including the all property.
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 revert-rule value.
revert-rule only cancels the effect of the rule. This value is mainly interesting when used in a condition.
This value can be applied to all properties, including the summarized property all.
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.
Summary.
| Initial value (W3C) |
Browser style sheet |
Layer | Rule |
|---|---|---|---|
initial | |||
revert | |||
revert-layer | |||
revert-rule |
|||
unset | unset |
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 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.
#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. So we find transparent, which is the initial value
for the background-color property.
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.
There are still compatibility issues with the value revert-rule
initial value that resets the property to its initial value (as defined in the standard).revert value, which gives the property back the value set by the browser, as if no user stylesheet mentioned that property.revert-layer value that cancels all rules regarding a property in this layer.revert-rule value that cancels the effect of the current rule.unset value, which resets the property to its initial value or to inherit if it’s an inherited property.initialvalue
revertvalue
revert-layervalue
revert-rulevalue
unsetvalue
Browsers on computers :
Mobile browsers :
Outdated or marginal browsers :
Internet Explorer
UC Browser pour Androïd
Opéra Mobile
QQ Browser
Baidu Browser
Safari
Safari sur IOS
Opéra
Chrome
Edge
Firefox
Chrome pour Androïd
Samsung Internet
Androïd Brower
Firefox pour Androïd
KaiOS Browser
Opéra mini
Values history initial.
-
Cascading Style Sheets specification - Version 1
This first level of the CSS specification describes the mechanism of cascading style sheets. Authors and readers can add styles to documents. Mainly intended for formatting HTML documents, CSS allows defining colors, fonts, text formatting, spacing (margins), etc. The CSS language is easy to understand, readable, and easy to write; it uses common terms from desktop publishing.
RegardinginitialSetting theinitialvalue in the very first version of CSS.
November 17, 1995Working Draft.
November 12, 1996Proposed for recommendation.
December 17, 1996Recommendation .
September 13, 2018Old specification, declared obsolete. -
Cascading Style Sheets Level 2 - Revision 1 Specification
This level 2 of the specification describes the mechanism of cascading styles in CSS. This language is used to format HTML or XML documents. It supports media-specific style sheets so that authors can adapt the presentation of their documents for visual browsers, auditory devices, printers, braille devices, portable devices, etc.
November 04, 1997Working Draft.March 24, 1998Proposed for recommendation.May 11, 1998Recommendation . -
CSS Cascading and Inheritance Level 3
This specification module introduces the values
initialandunset, as well as the shorthand propertyall.July 13, 2001Working Draft.
October 03, 2013Candidate Recommendation.December 22, 2020Proposed for recommendation.February 11, 2021Recommendation . -
CSS Cascading and Inheritance Level 4
This specification module introduces the
revertvalue.April 21, 2015Working Draft.January 14, 2016Candidate Recommendation. -
CSS Cascading and Inheritance Level 5
This specification module introduces the concept of style layer, the
@layerdirective, and therevert-layervalue.January 19, 2021Working Draft.January 13, 2022Candidate Recommendation.
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:
At-rules:
