THEMETRIAL

revert | Codrops CSS Reference

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 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 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.

Browser Support

* denotes prefix required.

  • Supported:
  • Yes
  • No
  • Partially
  • Polyfill

Stats from caniuse.com


Source link

Add comment

NOTE :

All visitors can share my site’s content on their blogs, sites, and social networks to enrich the content

Only share the source www.themetrial.com

Follow us

Don't be shy, get in touch. We love meeting interesting people and making new friends.