What does “revert” do in CSS?


(electronic music) I noticed a new global value recently that I hadn’t seen before, and I was a little surprised to see it because I thought we already
had a value that did this, and it turns out we didn’t. I was misunderstanding what was there. So I just want to show
you some differences between some of these
global values that we have. So what I have here is a paragraph, and I have a body tag
with color set to red, and padding to two Ms. And by default as you know color inherits, so our paragraph turns red,
and the padding doesn’t inherit so only the body has padding
on it, not the paragraph. Now I’m going to display
a few other paragraphs and look at what these
global values can do. So if I set this inherit paragraph to inherit both color and padding, this inherit value allows
us to turn on inheritance where it wouldn’t otherwise be. So that can be useful in some cases, probably not usually
for inheriting padding, maybe for custom properties,
something else like that. Let’s look at initial. So let’s bring up two paragraphs that are both this class of initial, and you can see by
setting color to initial the initial value for color is black, and the initial padding is zero. So those make some sense. But when we set display to initial, let’s just do that here, you can see that suddenly
these paragraphs become inline. And that’s because initial doesn’t go back to the user styles or the user agent browser
defaults that we might expect where a paragraph is
defined as a block element. Display initial actually resets display to the specification
default for that property. So when we don’t have browser styles giving us block paragraphs, the default for display is inline. So when we set display initial, we go the whole way back to
the specification default which is not likely what
we wanted in this case. I thought that unset would be
the solution to this problem because I expected unset to go
back to the browser default, but that’s not what happens. Unset does allow the color to inherit, but the default for display
is not entirely expected here because it’s the property default and not the default for a paragraph. Now what we really want
in a case like this is the new revert value that’s available globally on any property. And you can see with revert
if we just show that paragraph again we’re inheriting color, we’re resetting the padding
to it’s spec default. But also if we set the display to revert, we get the expected
behavior that I wanted here. That behavior is inheritance
is still supported, and also browser defaults are supported. We’re not going the whole way back to the specification
default for our property. We’re still respecting browser defaults. By using revert we’re still
respecting the user styles, the user agent styles,
and also inherited styles. This is a very useful property. Especially if we want to
revert all on something. Works a little bit like a reset. That’s just a quick intro to revert. You can check on support at caniuse. Likely in cases where you’ve considered using unset or initial revert might be the better option for you. (electronic music)

3 Comments

Add a Comment

Your email address will not be published. Required fields are marked *