保护元素免受非特异性影响 CSS
Protecting Elements From Unspecific CSS
我们目前必须编写一些要嵌入到各种页面上的小部件。据我所知，我有两种可能的选择来保护这些小部件免受松散 CSS 规则的影响（例如，一般的 p { background-color: red }）。它们是：
使用重置样式表确保小部件元素的所有 CSS 属性都设置为已知默认值。使用像 Less 这样的 CSS 预处理器，这可以很简单：
html body #myWidgetID {
.resetCSSMixin();
}
将元素嵌入到 iframe 中，就像 HTML5 Rocks 上的建议一样。
选项 1 是我已知的实体。它不漂亮，但它会工作。选项 2 我不太确定。大量的 iframe 会减慢页面速度吗？现在，我们的许多网站都将在旧硬件和缓慢的互联网速度下访问。我们还需要支持旧的 IE 8 - 是否存在浏览器兼容性问题？我们当然不能使用较新的 iframe 属性。
任何人都可以提出我不应该选择选项 2 的任何理由吗？这听起来是个更好的选择，但我想在打电话之前获得更多指导。
如果您关心 CSS 属性，您可以使用样式表中更具体的规则或 [=16] =] 属性。无论哪种方式，它都会覆盖松散的选择器。
如果您不关心 CSS 属性，则重置它没有意义，您可能应该允许它成为主题。
iframes 是一个非常古老的功能，所以 IE8 支持不是问题。主要区别在于 iframe 将单独的文档加载到框架中。这将产生几个影响：
- 小部件在单独的请求中加载。它将需要自己的 HTML 页面，因此您将有一个额外的 HTTP 请求，以及需要传输的更多数据。
- 不过，初始页面加载甚至可能更快，因为可以在加载小部件之前显示页面。
- iframe 是一个边界。 iframe 中的页面不能修改 iframe 之外的元素。这可能是优势（第 3 方 banners/widgets 由于安全风险不能访问）或劣势（如果您希望自己的小部件能够访问父级）。
- 因为它是一个单独的页面，所以它有自己的一组 CSS 并且不受父页面的任何影响（除了 width/height）。这可能是优势也可能是劣势。您可以完全控制小部件的外观，但很难让小部件的 users/implementors 有任何可能进行一些额外的样式设置。
我们目前必须编写一些要嵌入到各种页面上的小部件。据我所知，我有两种可能的选择来保护这些小部件免受松散 CSS 规则的影响（例如，一般的 p { background-color: red }）。它们是：
使用重置样式表确保小部件元素的所有 CSS 属性都设置为已知默认值。使用像 Less 这样的 CSS 预处理器，这可以很简单：
html body #myWidgetID { .resetCSSMixin(); }将元素嵌入到
iframe中，就像 HTML5 Rocks 上的建议一样。
选项 1 是我已知的实体。它不漂亮，但它会工作。选项 2 我不太确定。大量的 iframe 会减慢页面速度吗？现在，我们的许多网站都将在旧硬件和缓慢的互联网速度下访问。我们还需要支持旧的 IE 8 - 是否存在浏览器兼容性问题？我们当然不能使用较新的 iframe 属性。
任何人都可以提出我不应该选择选项 2 的任何理由吗？这听起来是个更好的选择，但我想在打电话之前获得更多指导。
如果您关心 CSS 属性，您可以使用样式表中更具体的规则或 [=16] =] 属性。无论哪种方式，它都会覆盖松散的选择器。
如果您不关心 CSS 属性，则重置它没有意义，您可能应该允许它成为主题。
iframes 是一个非常古老的功能，所以 IE8 支持不是问题。主要区别在于 iframe 将单独的文档加载到框架中。这将产生几个影响：
- 小部件在单独的请求中加载。它将需要自己的 HTML 页面，因此您将有一个额外的 HTTP 请求，以及需要传输的更多数据。
- 不过，初始页面加载甚至可能更快，因为可以在加载小部件之前显示页面。
- iframe 是一个边界。 iframe 中的页面不能修改 iframe 之外的元素。这可能是优势（第 3 方 banners/widgets 由于安全风险不能访问）或劣势（如果您希望自己的小部件能够访问父级）。
- 因为它是一个单独的页面，所以它有自己的一组 CSS 并且不受父页面的任何影响（除了 width/height）。这可能是优势也可能是劣势。您可以完全控制小部件的外观，但很难让小部件的 users/implementors 有任何可能进行一些额外的样式设置。