如何CSS沙箱/重置当前页面中的整个DIV区域？答案

【问题标题】：How to CSS sandbox/reset an entire DIV area in the current page?如何CSS沙箱/重置当前页面中的整个DIV区域？
【发布时间】：2012-07-23 08:50:16
【问题描述】：

我们正在开发一个书签，当书签加载到不同的网站时，例如：cnn.com、bbc.co.uk、yahoo.com，它会以各种样式显示，我们很难重新设置这些样式。

书签内容在当前页面 DOM 中，而不是在 iframe 中（因为我们需要 cookie 和对 DOM 的访问权限）。

我们尝试使用 CSS 重置，但这只会重置一些基本内容，例如边距。还有页面，例如有一个自定义表单，或者它继承的圆桌矩形，它不应该。

有没有办法可以完全隔离当前页面中的这个DIV区域，只看我们想要的样子？

【问题讨论】：

为什么不给它一个唯一的 id 并根据自己的喜好进行设计？
我们尝试过这样做，但问题是我们需要为每个 css 属性定义值。我认为这太过分了。
你真的别无选择，如果你将你的 div 嵌入到现有页面中并使用现有样式表，那么除了编写你自己的样式之外，没有办法覆盖这些样式。

标签： javascript html css bookmarklet

【解决方案1】：

尝试用一些不太可能出现在他们页面上的晦涩元素替换您的 div 怎么样。

例如。 b 或 em 或 i 如果您不关心浏览器支持，甚至可能是较新的 html5 元素之一。

并将它们的样式设置为display: block，使其功能类似于块元素div。

您生成的 HTML 不会是有效的或漂亮的，但它是一个书签，所以，嗯。

除此之外，您需要一个非常好的重置。

或者你只需要忍受你的造型上的细微差别。

【讨论】：

这很亲切，但INPUT和其他东西无法替代。
在这里查看我的答案的更高级版本：stackoverflow.com/questions/3019277/…
另外，人们可能只使用*{font-family: 'Comic Sans MS' !important;}，所以在这里使用晦涩的元素也无济于事。

【解决方案2】：

我们最终使用https://github.com/premasagar/cleanslate

CleanSlate 是一个极端的 CSS 重置样式表。它用于将 HTML 元素及其所有子元素的样式重置为默认 CSS 值。它完全由 !important 规则组成，这些规则覆盖所有其他类型的规则。

【讨论】：

...让你使用 !important 来覆盖那些，听起来像。

【解决方案3】：

好吧，您可以使用唯一 id 并在之后为每个属性添加 !important - 用于重置 DOM 中生成的元素 - 或者您可以使用“HTML5”中的新范围属性。

但这可能会导致该元素或父元素上的所有显式“继承”值样式出现问题。例如，相对字体大小也会导致问题。

因此在样式部分有实验范围属性，但上次我尝试它时只有 Chrome/Chromium 支持它，Firefox 可能最近也支持它 - 因为在邮件列表上有很大的讨论。

http://updates.html5rocks.com/2012/03/A-New-Experimental-Feature-style-scoped

编辑：

另一种解决方案是使用默认情况下不在 DOM 中的自定义元素。像 document.createElement("thisisfrommyapp"); 您可以像其他元素一样设置它们的样式，但必须应用 display:block 或任何他们想要的行为。

此外，IE 允许使用它们，但您实际上需要先将它们插入到 Tridents 的解析器中。如果您想在 HTML 中使用它们，则必须在解析 DOM 之前执行 createElement()（因此它很可能在文档的头部）。

<html>
<head><script>document.createElement('customelement');</script></head>
<body><customelement>is stylable in IE8, too</customelement></body>
</html>

你必须只为 Trident 做 createElement 的东西，否则你会因为它们的 display:inline-block 默认模型而导致奇怪的解析行为:)

如果您出于任何愚蠢的原因在网站上使用 XHTML（没有正当理由在 HTML 上使用 XHTML，因为解析器无论如何都会剥离 XML 标记），您应该为它使用自定义命名空间。

~干杯

【讨论】：

实验范围属性确实可以工作，但这是一个遥远的未来愿望。也许未来 10 年所有主流浏览器都会采用。
我阅读了链接的文章，但最大的问题仍然是 INPUT 标签。您将如何替换它们？

【解决方案4】：

按照这 2 个步骤对容器进行沙箱处理。

<div class="namespace-box">
    <h1 class="namespace-title">Title</h1>
    <p class="namespace-text">Text</p>
</div>

取消设置容器命名空间的所有属性，all: unset; 只是一个占位符：

[class*="namespace-"], [class*="namespace-"]:之后， [class*="namespace-"]：之前， [class*="namespace-"]:hover:after, [class*="namespace-"]:hover:before { 全部：未设置； // 要取消设置的属性 }

使用 Grunt 或 Gulp 任务将属性选择器添加到您的原始 CSS。这会增加级联并防止未设置的 hack 覆盖：

[class*="namespace-"].namespace-box, [class*="namespace-"].namespace-title, [class*="namespace-"].namespace-text { // 原始属性 }

您可以使用 postcss-increase-specificity 任务自动执行规范。

享受您的防弹容器。

【讨论】：