`all: unset` vs. `all: revert`: When Should You Use Each?

The Nuances of CSS: all: unset vs. all: revert

Understanding the subtleties between CSS keywords can elevate your styling capabilities. In the case of all: unset and all: revert, the distinction lies in their treatment of browser-applied and user-defined stylesheets.

all: unset

As stated in MDN, unset enables you to reset a property either to its inherited value if inherited from its parent or to its initial value if not. Consequently, it emulates the inherit keyword in the former scenario and the initial keyword in the latter.

all: revert

In contrast, revert reverts a property's cascaded value to its state had no modifications been made to the current element. This means that it resets the property to its inherited value, or if none exists, to the default value set by the browser's stylesheet or any applicable user styles.

Key Differences

The main distinction emerges when the browser applies default styles to an element. Using revert, you effectively undo these styles, whereas unset does not.

Illustration

Consider the following HTML and CSS code snippet:

<p></p>

Assume the browser automatically sets a default margin of 50px to

elements. In this instance, the text within the paragraph with margin:revert will have its margin reset to 0px, effectively removing the browser's default styling. On the other hand, the text within the paragraph with margin:unset will retain the browser's default margin of 50px.

The above is the detailed content of `all: unset` vs. `all: revert`: When Should You Use Each?. For more information, please follow other related articles on the PHP Chinese website!