W3cubDocs

/CSS

revert

The revert CSS keyword rolls back the cascade so that a property takes on the value it would have had if there were no styles in the current style origin (author, user, or user-agent). Thus, it resets the property to the default value established by the user-agent stylesheet (or by user styles, if any exist). It can be applied to any CSS property, including the CSS shorthand all.

The revert keyword is useful for isolating embedded widgets or components from the styles of the page that contains them, particularly when used with the all property.

In user stylesheets, revert rolls back the cascade and resets the property to the default value established by the user-agent stylesheet.

The revert keyword is different from and should not be confused with initial, which uses the initial value defined on a per-property basis by the CSS specifications. In contrast, user-agent stylesheets set default values on the basis of CSS selectors.

For example, the initial value for the display property is inline, whereas a normal user-agent stylesheet sets the default display value of <div>s to block, of <table>s to table, etc.

Example

HTML

<section>
  <p>This is a section!</p>

  <aside class="widget">
    <p>This is a little widget.</p>
  </aside>
</section>

CSS

section {
  color: blue;
  font-family: sans-serif;
  font-weight: bold;
}

.widget {
  all: revert;
}

Result

Specifications

Specification	Status	Comment
CSS Cascading and Inheritance Level 4 The definition of 'revert' in that specification.	Working Draft	Initial definition.

Browser compatibility

Feature	Chrome	Firefox (Gecko)	Internet Explorer	Opera	Safari (WebKit)
Basic support	No support^[3]	No support^[2]	?	?	9.1^[1]

Feature	Android	Firefox Mobile (Gecko)	IE Phone	Opera Mobile	Safari Mobile
Basic support	No support^[3]	No support^[2]	?	?	9.3^[1]

[1] See WebKit bug 149702.

[2] See bug 1215878.

[3] See Chromium bug 579788