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 brow

Answer 1

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

Answer 2

revert and unset are identical except when the default css value for a property is different than the value set by the browser - or by custom stylesheets created by the user.

For example the css default value for display is inline for all elements including divs, so if you set display:unset, it will act as if display:initial which is the same as display:inline, however we know that browsers set display:block for divs.

<div style="border: 1px solid blue">
  <p> This div use unset, now divs display will be inline</p>
  <div style="display:unset;"> text</div>
  <div style="display:unset;"> text</div>
</div>
<br/>
<div style="border: 1px solid blue">
  <p> This div use revert, now divs display will be block (the browser value or the value created by the user)</p>
  <div style="display:revert;"> text</div>
  <div style="display:revert;"> text</div>
</div>

Answer 3

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>