What does “revert” do in CSS?

Programming - Mar 31, 2024

Miriam Suzanne explains in a Mozilla Developer video on the subject.

The revert value in CSS “resets” a property back to it’s inherited value, only going as far back as the UA stylesheet. That’s critical, as it won’t reset a <p> to inline, for example, because a <p> is a block-level element as set in the UA stylesheet.

So if we had this HTML:

<p>Lorem, ipsum dolor.</p>
<p class="alt">Fugit, id vel.</p>

And CSS:

p {
  color: red;
}
.alt {
  color: revert;
}

Both paragraphs would be selected by the p selector, making them red, but the class selector on the second paragraph has higher specificity, so the color: revert; wins, changing the text back to black (the UA default).

But, the color property cascades, so if we had:

<div class="parent">
  <p>Lorem, ipsum dolor.</p>
  <p class="alt">Fugit, id vel.</p>
</div>
.parent {
  color: blue;
}
p {
  color: red;
}
.alt {
  color: revert;
}

The second paragraph would be blue because revert forces it to take its color from inheritance.

The revert value is fairly new, supported in Firefox and Safari, but not yet in Chrome-world. We’ve already got a couple of related keywords that work on any property which are meant to help control inheritance and reset values.

The difference is small, but important: unset allows inheritance, while initial does not.

Miriam makes the case that revert is actually the most useful of them because it “takes user and user-agent styles into consideration.”

I don’t disagree. But (and I hate to say this) I do think we need a fourth option, one that has the forcing power of initial, but the UA stylesheet respect of revert. Something like…

.button {
  all: default; /* Not real! */

  /* New styles starting from UA base */
}

These keywords work with any property, but I think using all is the most compelling. It’s a way to wipe out all styles on an element to start with a blank slate. That said, none of the three options is quite good enough for that use case. The unset and revert values aren’t good enough because they still allow inheritance and so doesn’t wipe out styles well enough. The initial value is too strong in that it wipes out defaults you might not expect, like making a <div> inline instead of block.

Previous Next
Copyrights
We respect the property rights of others, and are always careful not to infringe on their rights, so authors and publishing houses have the right to demand that an article or book download link be removed from the site. If you find an article or book of yours and do not agree to the posting of a download link, or you have a suggestion or complaint, write to us through the Contact Us .
Read More