CSS Reference Data Type

revert 566p46

The revert CSS keyword rolls back the cascade, meaning the property behaves as if there were no styles in the current style origin. l4x6w

This is different from the initial 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 style sheet, which is written by the of the browser used to view the website
the -agent style sheet, which is written by the browser vendor

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 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 style sheet. If none exist, then it will take on the declared value from the -agent style sheet.

Examples 3e5p5z

Given we have this simple list of links and some basic styling:

<ul>
  <li><a target="_blank"  href="http://www.typeisbeautiful.com/">Type is Beautiful</a></li>
  <li><a class="revert" target="_blank"  href="http://www.typeroom.eu/">typeroom</a></li>
  <li><a target="_blank"  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 -agent style sheet. If we have a 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 2x4j2k

This demo will only work in Safari 10 and iOS Safari 9.3 onwards as of January 2017.

View this demo on the Codrops Playground

Browser k5t66

CSS revert value 3x1m49

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 Working Draft

ed from the following versions:

Desktop 3n671n

Mobile / Tablet 4q224p

* denotes prefix required.

ed:
Yes
No
Partially
Polyfill

Stats from caniuse.com

Referencia de CSS3 325u2m