css - 制作小部件 "inherit-proof"

Question

我们正在开发一个旨在嵌入到第 3 方网站中的小部件。它的嵌入方式是使用 Javascript 在页面的主体部分动态注入(inject)一个 div。

在没有任何或很少样式规则的页面上，小部件看起来不错。问题是:我们看到小部件的样式规则被网页(我们称之为主机页面)覆盖导致的各种视觉问题，当主机页面有许多 CSS 规则时，如果小部件未明确定义这些规则(因此小部件从主机页面继承这些规则)。

在我看来，最明显的解决方案是:为小部件中的每个元素定义所有 CSS 规则。当我说 ALL 时，我指的是所有 CSS 规则，如背景颜色等，适用于所有状态，如正常、聚焦。这显然是一种残酷的强制方法，并且可能会导致仅对一个简单的小部件进行大量工作。这似乎不太聪明。

所以我的问题是:是否有任何明确的工具可以防止主机页面的样式扰乱小部件的样式？

举个例子，假设主机页面有这样的 CSS 规则:

div {
  border-bottom: 1px solid green;
}

此规则将所有 div 的底部边框设置为透明。然后我们在我们的小部件中愉快地定义了一大堆规则，除了我们忘记定义 border-bottom 规则。在这种情况下，所有的 div 底部边框都是绿色的。

虽然为小部件添加 border-bottom 规则来解决这个特定问题是合理的，但真正的问题是:您无法控制主机页面上出现的规则，因此，为了真正安全，您必须为所有状态的小部件中的所有元素定义所有规则，这对我来说真的很麻烦且容易出错。

我们知道使用 iframe 不会出现此类问题，但我们宁愿不使用它，也不要讨论它。

我们也很清楚在 CSS 规则中使用 !important 来覆盖以前的规则的方法。但这仍然需要定义完整的 CSS 规则(即 brutal force 方法)。也请将其排除在讨论之外。

谢谢。

Answer 1

all: initial; CSS 属性就是您要查找的内容:

The CSS all shorthand property resets all properties, apart from unicode-bidi and direction, to their initial or inherited value. [MDN]

但它目前有 low browser support .

这是一个如何使用它的例子:

div div {
  display: inline-block;
  width: 50px;
  height: 50px;
  margin: 10px;
  background: gold;
  border-bottom:5px solid green;
}
#wrap div {
  all: initial;
  display:block;
  height:10px;
  background:pink;
  margin:1px;
}

<div>
  <div></div>
  <div></div>
</div>
<div id="wrap">
  <div></div>
  <div></div>
</div>