This morning I went to Sidebar and saw an interesting article named “82% of developers get this 3 line CSS Quiz Wrong”. I thought to myself, with three lines of code so many people are doing it wrong, let’s see what happens. Click in and there’s this poll:

Of the 1,737 people who voted, only 18.1% chose the correct answer: Skyblue, meaning only 314 got it right.

I’m shocked. I think too many people got 😛 right. In fact, I don’t even know how to use revert.

:root {--accent-color: skyblue; } 
div { --accent-color: revert; background: var(--accent-color, orange); } 
Copy the code

I immediately looked up the use of revert and found that quite a few people got this question right 😅.

Give it a try in the browser.

Results:

The answer is indeed Skyblue.

Revert is the global KEYWORD of the CSS, which means that you can use it as a property value for all CSS properties, including the shorthand all. Other global keywords include inherit, initial, and unset.

The Revert keyword allows you to restore the current element’s style to the browser’s built-in UA Stylesheet. (We assume that there are no user stylesheets —- provided by browser users).

This means that the custom attribute –accent color — has no value. Since div has no –accent color attribute, the custom attribute is invalid according to the use of var, so the function will use the second value, orange, which is wrong. Since custom attributes are inherited by default, just like scoped variables, div can use –accent color because it is defined in :root, so the background of div is Skyblue.

What if we made custom attributes non-inherited? It’s not orange this time?

Note that when we register a custom property, we must provide an initial value. The code is as follows:

:root {
    --accent-color: skyblue;
}

@property --accent-color {
  syntax: "<color>";
  inherits: false;
  initial-value: yellowgreen;
}

div {
  padding: 3em;
    --accent-color: revert; 
    background: var(--accent-color, orange);
}
Copy the code

Results:

The answer is the default value for the custom property, yellowgreen.

That’s it. Speaking of custom properties, I remember recently reading a book about the use of custom properties in CSS In Depth, section 2.6.

Original text: lea. Verou. Me / 2021/05/8 2 -…

Test environment: Google Chrome 90.0.4430.212 (official version) (64-bit)