Initially, it's important to note that the CSS property "all:revert" will not function properly on Internet Explorer. This may be the cause of any issues you are encountering. The purpose of using "all:revert" is as follows:
- It clears out all directly assigned CSS property values on your element.
- Any properties inherited from parent elements (typically text-based attributes like font) are now inherited by the element through normal cascading.
- Non-inheritable properties (such as display or border) are removed from the element and replaced with values specified in the browser's user agent style sheet. Other styles for these properties on the element will be disregarded. Essentially, this resets the element to its default browser style.
- Keep in mind that if there are more specific styles overriding the "revert" declaration on the element, those styles will take precedence. Like any other CSS property, "all:revert" can be overridden by more specific styling.
For example, if a custom "font" value (inheritable) was applied to a div, it would be removed and the font setting from the parent hierarchy above the div would be used instead. On the other hand, if a custom "border" value (non-inheritable) was set, it would be replaced by the default browser value for "border" on a "div" element in the browser's style sheet. Typically, this default value is "none" for "border on "div".
Additionally, "all:unset" operates similarly but defaults to "initial" for non-inheritable properties. This can result in unexpected behavior as it applies the universal default value for the property, regardless of the element using it.
Therefore, changes made with "all:revert" to non-inheritable properties will not impact children's styles unless explicitly set to inherit from their children. In contrast, inheritable settings like fonts, color, and line-height will begin inheriting styles from higher up the parent hierarchy. It's worth mentioning that in CSS, the distance of a parent does not affect specificity, but it could influence the changes you observe.
If you notice odd text appearances, examine the newly inherited styles from parents above the code snippet. Using "all:revert" broadly throughout markup may lead to confusion. It's recommended to apply revert only to specific elements to reset them back to browser defaults for non-inheritable values, or to reset the entire page to browser defaults for both inheritable and non-inheritable properties.