[CSS] initial vs unset vs revert

/*
initial: default value of the css property, you don't need to remember what's the default value of each css property, just use initial should do the trick
unset: neither use the default value or the inherit value, but we don't want to remember which css property can use inherit or not, therefore we can use unset, it can also override default value
revert: reset to browser default style
*/
 

Here’s a concise explanation of the CSS values revert, initial, and unset:

  1. revert:

    • Resets a property to the value it would have if no CSS rules were applied, respecting the user-agent stylesheet or inherited rules from the browser defaults.
    • Example: <button> text color would reset to the browser's default for buttons.
  2. initial:

    • Resets a property to its default initial value defined in the CSS specification, regardless of inheritance or the user-agent stylesheet.
    • Example: display would reset to inline (its spec-defined default).
  3. unset:

    • Acts as:
      • inherit if the property is inheritable.
      • initial if the property is not inheritable.
    • Example: For color (inheritable), it behaves like inherit. For margin (non-inheritable), it behaves like initial.

These values are useful for managing inheritance, resetting styles, and debugging CSS rules.

posted @   Zhentiw  阅读(7)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 在鹅厂做java开发是什么体验
· 百万级群聊的设计实践
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战
· 永远不要相信用户的输入:从 SQL 注入攻防看输入验证的重要性
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析
历史上的今天:
2022-11-26 [XState] raise event: trigger an action immediately when reach target state
2022-11-26 [Typescript] 118. Hard - IsRequiredKey
2022-11-26 [Typescript] 117. Hard - ClassPublicKeys
2020-11-26 [RxJS] Filtering operator: first
2020-11-26 [Tools] Interactively exploring a large JSON file with fx
2020-11-26 [Javascript] Broadcaster + Operator + Listener pattern -- 22. mapError, wrap fetch with broadcaster with cancellation
2020-11-26 [Javascript] Cancel a promise
点击右上角即可分享
微信分享提示