What's the difference between `all: unset` and `all: revert'

Question

As per MDN:

The revert keyword works exactly the same as unset in many cases. The only difference is for properties that have values set by the browser or by custom stylesheets created by users (set on the browser side).

I don't understand the browser and custom stylesheet. Both browser and custom stylesheet can be replaced by all: unset also, right?

Answer 1

From the MDN:

The unset CSS keyword resets a property to its inherited value if it inherits from its parent, and to its initial value if not. In other words, it behaves like the inherit keyword in the first case, and like the initial keyword in the second case.

So unset is either inherit or initial

The revert CSS keyword reverts the cascaded value of the property from its current value to the value the property would have had if no changes had been made by the current style origin to the current element. Thus, it resets the property to its inherited value if it inherits from its parent or to the default value established by the user agent's stylesheet (or by user styles, if any exist).

Suppose the browser apply a default style to your element. Using revert, you will put back those styles while unset will not.

Example:

p {
  margin: 50px;
}

<p style="margin:revert">
  some text here
</p>
<p style="margin:unset">
  some text here
</p>

In the above example, the revert will erase the 50px margin and will put back the default margin applied by the browser. In the second case, unset will simply set the margin to initial (which is 0).

^{The revert value is not supported in all the browsers: https://caniuse.com/#feat=css-revert-value}

---

In case no default styles are applied, revert will behave the same as unset

The revert keyword works exactly the same as unset in many cases. The only difference is for properties that have values set by the browser or by custom stylesheets created by users (set on the browser side).

---

all is a shorthand for all the properties so the same logic described above apply to each property.

---

More examples:

p {
  margin: 50px;
  border:1px solid blue;
}

.box {
  color: red;
  display:unset;
}

p {
  color:unset; /* I will be inherit so I will keep the red color*/
  display:inline-block;
}

<div class="box">
  <p style="margin:revert;border:revert;display:revert;">
    some "block" text that should have no border and default browser margin
  </p>
  <p style="margin:unset;border:unset;display:unset;">
    some "inline" text that should have no border and no margin
  </p>
</div>

Answer 2

The unset keyword will first try to fall back to inherited property values, while revert will directly fall back to browser/custom stylesheet. As per MDN:

The unset CSS keyword resets a property to its inherited value if it inherits from its parent, and to its initial value if not. In other words, it behaves like the inherit keyword in the first case, and like the initial keyword in the second case.

unset - CSS @ MDN