在用户脚本中使用“revert”CSS 关键字

Question

revert我尝试根据关键字是在用户脚本中使用还是在网站本身中使用来找出关键字工作方式的差异。

MDN 上的一篇文章描述了这种差异：

此关键字从级联中删除所有已被覆盖的样式，直到达到要回滚到的样式。

• 如果由站点自己的样式（作者来源）使用，revert则将属性的级联值回滚到用户的自定义样式（如果存在）；否则，它将样式回滚到用户代理的默认样式。
• 如果在用户的自定义样式表中使用，或者样式由用户（用户源）应用，revert则将级联值回滚到用户代理的默认样式。

然而，我自己并没有看到任何区别。有人可以举个例子吗？

Answer 1

先决条件 #1：我们需要了解规范定义的3 个主要级联起源，然后就很容易理解该值的作用：

1. 作者来源- 这意味着网站、CDN、外部来源，甚至http://127.0.0.1。出于所有意图和目的，它是从互联网上获取的网站 CSS 文件。任何网站无处不在的样式表
2. 用户来源- 这意味着C:\Users\yourself\AppData\Local\Google\Chrome\User Data\Default\User StyleSheets\Custom.css- 大多数桌面平台上的浏览器允许您指定默认应用的“用户”样式表。不确定有多少人使用此功能，但它确实存在，并且允许您做一些疯狂的事情，例如font-family: "Comic Sans MS" !important;.
3. 用户代理起源- 浏览器需要提供默认样式，以便文本区域使用固定宽度字体或<u>text</u>具有下划线。以下是默认 UA 样式如何应用于正文并被作者原始样式覆盖的示例：
   

先决条件#2：我们需要了解该规范是 WD 状态（工作草案）——这意味着它尚未投放市场供浏览器采用，因此可能还没有解决一些微小的细节。如果某些事情看起来有点不寻常，那是因为它仍在等待反馈。那里的世界就是这样运作的，完全正常。

现在我们已经正式理解了这些位，让我们看看当我们使用 时会发生什么font-family: revert。嗯，这取决于它的设置位置：

• 如果在作者上下文中-> 将回滚以使用来自用户源的值
• 如果在User origin -> 将回滚以使用User-agent origin中的值
• 如果在User-agent origin -> 中，其行为将类似于font-family: unset. 现在，有些 CSS 属性会inherit值，有些则不会。取决于属性。font-family在我们的例子中，显然是从body父母那里继承的，padding但事实并非如此。此属性表中有完整的列表
  • 如果属性本质上是继承的，则该revert值的行为就像inherit意味着它将转到级联的指定值或计算值。
  • 如果该属性不继承，它将应用（请参阅同一属性表initial value中的列

我将尝试解决一些我可以预见的其他问题：

1. 你不必用!important一切来解释某人所做的事* { all: revert }。
2. 浏览器在外观上有很大的余地，相当多，这就是为什么我们在过去几十年里一直在进行CSS 重置
3. 对于面向公众的网站，不太可能有人需要使用它。
4. 对于不常见的 Intranet 应用程序之类的东西，假设一家公司希望下拉菜单和其他表单控件能够承载公司品牌、颜色、字体等，并且这些控件是在操作系统级别设置的，以便它们通过浏览器的外观向下渗透- 即使在这里，我们也更有可能initial通过应用程序的样式表来使用，因为我们希望控件保留在项目的存储库中。