在用户脚本中使用 'revert' CSS 关键字
Using the 'revert' CSS keyword in user scripts
我试图找出 revert 关键字的工作方式差异，具体取决于它是在用户脚本中使用还是在网站本身中使用。
An article on MDN 描述这种差异如下：
This keyword removes from the cascade all of the styles that have been overridden until the style being rolled back to is reached.
- If used by a site's own styles (the author origin),
revert rolls back the property's cascaded value to the user's custom style, if one exists; otherwise, it rolls the style back to the user agent's default style.
- If used in a user's custom stylesheet, or if the style was applied by the user (the user origin),
revert rolls back the cascaded value to the user agent's default style.
但是，我自己看不出有什么不同。有人可以举个例子吗？
Prereq #1：我们需要了解规范定义的 3 个主要 cascading origins，然后很容易理解该值的作用：
- 作者来源 - 这意味着网站、CDN、外部来源，甚至 http://127.0.0.1。就所有意图和目的而言，它是从互联网上提取的网站 CSS 文件。任何网站无处不在的样式表
- 用户来源 - 这意味着
C:\Users\yourself\AppData\Local\Google\Chrome\User Data\Default\User StyleSheets\Custom.css - 大多数桌面平台上的浏览器允许您指定默认应用的“用户”样式表。不确定有多少人使用此功能，但它就在那里，可以让你做一些疯狂的事情，比如 font-family: "Comic Sans MS" !important;.
- User-agent origin - 浏览器需要提供默认样式，以便文本区域使用 fixed-width 字体，或
<u>text</u>有下划线。以下是默认 UA 样式如何应用于正文并被作者来源样式覆盖的示例：
Prereq #2：我们需要了解此规范是 WD 状态（工作草案）- 这意味着它尚未投放市场供浏览器采用，因此可能还没有制定出微小的细节。如果某件事看起来有点不寻常，那是因为它仍在等待反馈。那边的世界就是这样，完全正常。
现在我们已经正式理解了这些位，让我们看看使用 font-family: revert 时会发生什么。好吧，这取决于它的设置位置：
- 如果在作者上下文中 -> 将回滚以使用来自用户来源
的值
- 如果在 User origin -> 将回滚以使用来自 User-agent origin
的值
- 如果在 User-agent origin -> 将表现得像
font-family: unset。现在，一些 CSS 属性将 inherit 值，而有些则不会。取决于属性。 font-family 在我们的示例中显然继承自 body 和 parents，padding 则没有。 property table 中有完整的列表
- 如果属性本质上是继承的，
revert 值将表现得像 inherit，这意味着它将转到指定的或计算的值级联。
- 如果属性不继承，它将应用
initial value（见同列property table
我将尝试解决其他一些我可以预见的问题：
- 你不必在每件事上都加上
!important 来说明某人做了 * { all: revert }。
- 浏览器在外观上有很大的余地，相当多，这就是为什么我们在过去几十年里一直在做 css resets
- 对于面向 public 的网站，不太可能有人需要使用它。
- 对于不常见的 Intranet 应用程序之类的东西，假设一家公司想要下拉菜单和其他表单控件来承载公司品牌、颜色、字体等，并且在这样的情况下将它们设置在 OS 级别它们通过浏览器的外观向下渗透的方式 - 即使在这里我们也更有可能使用
initial 而不是通过应用程序的样式表，因为我们希望控件保留在项目的 repo 中。
我试图找出 revert 关键字的工作方式差异，具体取决于它是在用户脚本中使用还是在网站本身中使用。
An article on MDN 描述这种差异如下：
This keyword removes from the cascade all of the styles that have been overridden until the style being rolled back to is reached.
- If used by a site's own styles (the author origin),
revertrolls back the property's cascaded value to the user's custom style, if one exists; otherwise, it rolls the style back to the user agent's default style.- If used in a user's custom stylesheet, or if the style was applied by the user (the user origin),
revertrolls back the cascaded value to the user agent's default style.
但是，我自己看不出有什么不同。有人可以举个例子吗？
Prereq #1：我们需要了解规范定义的 3 个主要 cascading origins，然后很容易理解该值的作用：
- 作者来源 - 这意味着网站、CDN、外部来源，甚至 http://127.0.0.1。就所有意图和目的而言，它是从互联网上提取的网站 CSS 文件。任何网站无处不在的样式表
- 用户来源 - 这意味着
C:\Users\yourself\AppData\Local\Google\Chrome\User Data\Default\User StyleSheets\Custom.css- 大多数桌面平台上的浏览器允许您指定默认应用的“用户”样式表。不确定有多少人使用此功能，但它就在那里，可以让你做一些疯狂的事情，比如font-family: "Comic Sans MS" !important;. - User-agent origin - 浏览器需要提供默认样式，以便文本区域使用 fixed-width 字体，或
<u>text</u>有下划线。以下是默认 UA 样式如何应用于正文并被作者来源样式覆盖的示例：
Prereq #2：我们需要了解此规范是 WD 状态（工作草案）- 这意味着它尚未投放市场供浏览器采用，因此可能还没有制定出微小的细节。如果某件事看起来有点不寻常，那是因为它仍在等待反馈。那边的世界就是这样，完全正常。
现在我们已经正式理解了这些位，让我们看看使用 font-family: revert 时会发生什么。好吧，这取决于它的设置位置：
- 如果在作者上下文中 -> 将回滚以使用来自用户来源 的值
- 如果在 User origin -> 将回滚以使用来自 User-agent origin 的值
- 如果在 User-agent origin -> 将表现得像
font-family: unset。现在，一些 CSS 属性将inherit值，而有些则不会。取决于属性。font-family在我们的示例中显然继承自body和 parents，padding则没有。 property table 中有完整的列表- 如果属性本质上是继承的，
revert值将表现得像inherit，这意味着它将转到指定的或计算的值级联。 - 如果属性不继承，它将应用
initial value（见同列property table
- 如果属性本质上是继承的，
我将尝试解决其他一些我可以预见的问题：
- 你不必在每件事上都加上
!important来说明某人做了* { all: revert }。 - 浏览器在外观上有很大的余地，相当多，这就是为什么我们在过去几十年里一直在做 css resets
- 对于面向 public 的网站，不太可能有人需要使用它。
- 对于不常见的 Intranet 应用程序之类的东西，假设一家公司想要下拉菜单和其他表单控件来承载公司品牌、颜色、字体等，并且在这样的情况下将它们设置在 OS 级别它们通过浏览器的外观向下渗透的方式 - 即使在这里我们也更有可能使用
initial而不是通过应用程序的样式表，因为我们希望控件保留在项目的 repo 中。