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, whileinitial
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.
Yea I totally agree that would be such a great thing I tried to “find” numerous times while getting upset buy initial and unset
The best solution I could come up with for your use-case:
Very clever.
Why not just create a new css class and start from scratch?
What’s the difference between
revert
andinherit
?Good question!
inherit
takes the value of the parent element. So, say we have an element that has a border around it:Now let’s say that element has another element inside of it. That’s a child element because it is inside of another element. If we want that child to have the same border, all we have to do is use
inherit
to duplicate the border, rather than having to write everything back out.Then there’s
revert
, which wipes whatever inherited styles an element might pick up and uses the element’s default styling:be warned, css “revert” values cannot always be animated and/or transitioned the way you may expect them to. It might work in one browser and not in another. This is because each core has it’s own way of parsing CSS and animations/transitions are processed using these perceived values. This will probably not be an issue in another decade (we are down to only a few different browser engines now) so I would just bear that in mind for now.