Revert

Michael Gearon

Last updated on July 7, 2021

The revert value allows you to reset the property’s value to the default styling specified by the browser in its user agent stylesheet. At time of writing it is only supported in Firefox and Safari with intent to ship for Chrome. It can be applied to any CSS property including the CSS shortand all.

How does the revert differ to the initial value?

The inital value is defined on a per-property basis where revert resets the default value to the user agent stylesheet. To clarify this we need to look at the cascading part of CSS where there are 3 sources where CSS can come from:

1. Author style sheet: written by the developer or the site owner of the web page or website
2. User style sheet: written by the user or in other words the viewer of that web page
3. User-agent stlye sheet: the default styling written by the browser vendor

To summarise the revert value does consider the user and the user-agent styles which makes it really powerful as this can benefit users who use a user style sheet to improve their experience on the web if they have accessibility needs.

Examples

Revert all

There may be a case where you need to revert everything to default. To do this we can use the all property and then revert.

Our HTML could be:

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p class="revert">Fusce sit amet luctus mi.</p>

Then to revert all of the styling on the second paragraph the CSS could be:

p{
 color: purple;
 background: yellow
}
.revert{
 all: revert
}

This will then revert all of the CSS on the second paragraph using the revert class name. If we wanted to revert just the color but not the background then our CSS would be:

.revert{
 color: revert
}

First published on December 2, 2020