What does “revert” do in CSS?
Miriam Suzanne has a Mozilla Developer video on the subject. 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
The post What does “revert” do in CSS? appeared first on CSS-Tricks.