The revert CSS keyword rolls back the cascade, meaning the property behaves as if there were no styles in the current style origin.
This is different from the <a href="https://tympanus.net/codrops/css_reference/initial/">initial</a> keyword. For this to make sense, we need to fully understand the “Cascading” in “Cascading Style Sheets”. An HTML element can have multiple declared values for a given property. Most of us are probably familiar with specificity when it comes to determining which declaration wins out. However, if we refer back to the W3C specification on Cascading, we’ll discover that before specificity comes into play, the declaration’s origin comes first.
In general, there are three source origins for CSS declarations, in descending order of priority (first one takes precedence):
- the author style sheet, which is written by the developer of the website
- the user style sheet, which is written by the user of the browser used to view the website
- the user-agent style sheet, which is written by the browser vendor
User style sheets may not be all that common, but it is possible to get a browser to use a custom style sheet you defined on your local machine. This allows you to modify the display of a website, particularly useful for people with low vision disabilities who’d like to have different font sizes, contrast and so on to read comfortably. Every browser does this differently, and you can refer to this WikiBooks entry on User style sheets for instructions for most of the major browsers.
So when we use the revert keyword in our author style sheet, the property will take on the declared value from the user style sheet. If none exist, then it will take on the declared value from the user-agent style sheet.
Examples
Given we have this simple list of links and some basic styling:
<ul> <li><a href="http://www.typeisbeautiful.com/">Type is Beautiful</a></li> <li><a class="revert" href="http://www.typeroom.eu/">typeroom</a></li> <li><a href="https://blog.29lt.com/">29Letters Blog</a></li> </ul>
a {
color: orange;
}
.revert {
color: revert;
}
The link with the “revert” class will render in the default browser blue that is defined by the user-agent style sheet. If we have a user style sheet in use that contains the following rule
a {
color: green;
}
…the link with the “revert” class will render in green instead.
Live Demo
This demo will only work in Safari 10 and iOS Safari 9.3 onwards as of January 2017.
View this demo on the Codrops PlaygroundBrowser Support
CSS revert value
A CSS keyword value that resets a property's value to the default specified by the browser in its UA stylesheet, as if the webpage had not included any CSS. For example, `display:revert` on a `<div>` would result in `display:block`. This is in contrast to the `initial` value, which is simply defined on a per-property basis, and for `display` would be `inline`.
W3C Candidate Recommendation
Supported from the following versions:
Desktop
- 84
- 67
- No
- 73
- 9.1
Mobile / Tablet
- 9.3
- 130
- No
- 130
- 130
