Trả về nguyên trạng của một tag là mong muốn khi bạn sử dụng các thiết lập có sẵn
như bootstrap, joomla, wordpress,..
all: none;
all: unset;
all: revert;
all: initial;all: revert --- reset về UA style sheet property values hoặc styled in the parent body element.
source stackoverflow.com
all:revert will RESET all the style properties on your element back to the original browser default UA style sheet property values, or whatever is styled in the parent body element. But it will not ERASE style properties like initial, returning them to a completely unstyled state.
In the case of text or inherited properties, "revert" resets your element's CSS property back to its inherited values coming from your "body" element or the browser's default UA style value, not to the property’s base style. For a non-inherited property, it resets it back again to the browser's UA default style sheet and not to the property’s base style. "all" allows all properties to be affected. This is likely what you want to see.
Problems Using "all:revert"
"all:revert" is a newer CSS declaration that only works in more modern HTML5 browsers (post-2015), and even then has very poor support in certain modern browsers like Internet Explorer 1-11, Edge Trident, and some mobile browsers. None of the older, non-HTML5 browsers (pre-2010) will understand this declaration, so it will be ignored by a wide range of browsers, old and new. (See my mixed CSS solution down below that has fixes for Internet Explorer).
Problems Using "initial" and "unset"
You can use "initial" or "unset" but you have to manually apply them for each property, and what is even worse, they will not return properties to the element's default display values as set by each browser's default UA style sheet, but "initial" will essentially erase the element's property values and create a completely unstyled element. For example, "display:block" on block level elements will be erased. Because the style property still needs a default value of some kind all block and non-block level elements with "display" will be changed to "display:inline" when you use "display:initial". You do not want to ever do this as it erases your styles AND the browser's default UA element styles from the selected element completely.
"unset" works close to the same, but in the case of inherited text-based CSS properties its properties inherit whatever is in the parents above the element (could be the browsers default UA style or whatever is in the HTML parent above), but for non-inherited properties works like "initial".
My recommendation is AVOID using all:initial or any form of initial in CSS unless you are trying to erase an individual CSS property you cannot erase in any other way. Why? initial erases not just the styles you applied but all styles the browsers default UA style sheet applied. all:revert will not do this. In terms of using initial, it does have better support in Internet Explorer, as does its cousin, inherit. But only IE8+ understands initial. So, there are a wide range of problems with this property value. It is not reliable.
The reason CSS works this way is all HTML elements come without any styling until the browser applies a default user-agent style sheet that gives all the HTML elements a base style. All HTML elements really have NO STYLES, and other than "replaced" elements like textarea and buttons, look alike until each browser's default UA sheet is applied. "initial" and "unset" would wipe away most of that from the browser. "revert" at least preserves their basic style set applied by the user's browser, and is therefore superior to "initial" and "unset". You can review all the various default style sheets that come with browsers in the link below.
