如何将div和decedents的所有样式重置为chrome默认值

Question

我不确定这是否可行，但我喜欢将所有用户样式设置回div和后代的chrome默认值。

我正在构建一个chrome插件，可以在任何网页上创建一个弹出窗口，但是由于每个页面都有大量自定义样式，尝试跟踪每个不一致并用我的div（和后代）自定义覆盖它它将成为一场噩梦。

每当我认为我已覆盖所有基础时，另一个网站会实现其他需要重写的内容

在这种情况下，将弹出窗口标准化的最简单方法是什么？

我能想到的一种方法是（咬一口）并获得默认的chrome css样式，并将它们实现为一系列捕获所有后代选择器，但肯定有更好的方法

Answer 1

如果您希望绝对确保元素的样式不受网页CSS的影响，则有两种可能的解决方案：

1. 使用iframe来实现弹出窗口。 （此解决方案“安全”且足够简单，但基于弹出窗口和网页之间的交互类型，它可能会变得很麻烦。）

2. 利用 Shadow DOM 。 （这可能是“正确的”解决方案，但实施可能会稍微复杂一点。）

关于第二个解决方案的一些资源：

• 介绍 tutorial 。
• 将“Shadow DOM”概念合并到Chrome扩展程序中的实际示例：
  RobW的 Display Anchors extension

Answer 2

还有第三个选项值得讨论和拒绝，即将div及其后代的所有样式属性重置为其默认值。伪代码：

#my-div, #my-div * {

  @for-every-css-property {

    %propertyName: initial !important;

  }

}

This answer显示了尝试这种解决方案。它使用的是特定值，而不是initial，它可以在没有initial关键字的旧版浏览器中使用，但不能正确重置与基础有不同默认值的元素（例如user566245提到textarea元素应该有边框。）

的问题：

• 不幸的是initial is not actually the browser's default value。
• 如果我们不使用上面的!important，那么该网页可能会提供一个规则，其中包含一个更具体的选民，该选民会覆盖我们自己的选民。例如，如果页面指定了table > tr > td的属性，那么这将适用于我们的规则，因为该选择器比#my-div *更具体。
• 由于我们使用!important，因此重置后我们要执行的任何自定义样式也必须在每个属性上使用!important。
• 如果页面恰好注入我们之后使用!important的任何其他CSS样式，那么这些可以覆盖我们的重置。
• 效率很低。我们要求浏览器将大量CSS规则应用于我们div下的每个元素。
• 还应重置特定于供应商的属性。 （例如-webkit-animation-name。）
• 如果将来出现新的CSS属性，您需要更新列表。

虽然这个解决方案可以应用于当前的浏览器，但它相当可怕，所以滚动Shadow DOM！我会在此期间推荐<iframe>解决方案。

我不知道是否有人试过这个，但更有效的解决方案可能是使用Javascript来检测哪些网站定义的CSS属性可能有问题，并且只重置那些。