4

我有一个 jQuery 插件，它将动态地向页面呈现大量的 HTML。我希望插件的使用者能够按原样使用它，并且无论他们使用什么 CSS 样式，它看起来都一样。

因此，我需要一个“范围”的 CSS 重置 - 即在我的插件 div 中说任何内容的能力不应受到所有者 CSS 的影响。

现在显然我可以重置我在这个范围内使用的所有 HTML 元素，但它看起来不是很优雅。其他人会以任何方式处理这个问题吗？

4

4 回答 4

4

经过一番谷歌搜索后，我发现了我之前偶然发现的这个项目。这是一个完全依赖于 !important 规则的范围 CSS 重置。https://github.com/premasagar/cleanslate

于 2011-08-05T23:49:53.843 回答
0

没有真正的 CSS 重置。CSS 样式规则将级联到它所应用的任何元素，而阻止这种情况的唯一方法是用另一个规则覆盖它。

重置样式表通过覆盖浏览器默认应用的重要规则来工作。如果你想在一个范围内做类似的事情，它不会被限制在浏览器默认设置的范围内，你必须覆盖所有可能在页面样式表中设置的样式。即使那样，您也不能制定如此具体的规则，以至于它们会否决所有可能的选择器。

所以，你要求的是不可能的。但是，您可以通过覆盖范围的最常见和最重要的样式来做出合理的折衷。

于 2011-03-16T19:11:50.980 回答
0

您可以通过插件将所有样式内联到您注入 DOM 的 HTML 中。这仍然不能保证，因为如果他们愿意，用户也可以用他们自己的 JS 覆盖它。

如果为了方便起见，您可以将所有 HTML 包装在一个 ID 中，然后重置其中的所有内容：

#myPluginHTML p, #myPluginHTML li, #myPluginHTML div, etc {
   margin: 0px;
   etc: 0;
}

同样，不能保证任何事情。但应该默认工作。

于 2011-03-16T19:03:24.327 回答
0

我建议结合几件事：

  1. 使用许多命名空间/前缀类，即plugin-checked plugin-active
  2. 创建一个默认样式表，当没有其他样式应用于页面时，该样式表将为正确的类提供正确的样式。
  3. 对始终相同的 ui 动画使用内联样式（在此选择不多，如果是动画，内联样式会发生变化）。
  4. 提供关于哪些类应用于哪些元素以及何时应用的良好文档。

这将允许更高级的开发人员使用他们自己的样式表，或者扩展您的样式表以制作所需的格式，如果他们做了类似div a {float:left;}.

You can be very specific in your default stylesheet, specifying every rule for every element, but that tends to be entirely unnecessary as it's more trouble than it's worth.

Avoid making a plugin that restricts development, try instead to make a plugin that simplifies development.

As an HTML5 solution that may or may not be supported (no idea what browsers support this yet), you could add a set of styles to a container via a style element with the scoped attribute (go figure, scoped styles). It could contain a simplified HTML reset, but this whole system is more likely to restrict you later on when you want to override something and have to get into a specificity fight.

于 2011-03-16T19:21:24.523 回答