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

Question

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

bookmarklet内容位于当前页面DOM中，而不是iframe中（因为我们需要cookie并访问DOM）。

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

有没有办法让我们可以完全隔离当前页面中的DIV区域，只显示我们想要的内容？

Answer 1

试着用一些不太可能出现在他们页面上的模糊元素来替换你的div。

例如。 b或者em或i或者甚至是一个较新的html5元素，如果你不喜欢浏览器支持。

并将它们设置为display: block功能就像div ，是一个块元素。

你的结果HTML不会有效或漂亮，但它是一个书签，所以，嗯。

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

或者你只需要在造型方面略有不同。

Answer 2

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

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

Answer 3

好吧，你可以使用唯一的id，然后在每个属性中添加！important - 用于重置DOM中生成的元素 - 或者你可以在“HTML5”中使用新的scoped属性。

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

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

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

编辑：

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

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

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

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

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

〜干杯

Answer 4

按照以下两个步骤来沙箱容器。

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

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

[class*="namespace-"],
[class*="namespace-"]:after,
[class*="namespace-"]:before,
[class*="namespace-"]:hover:after,
[class*="namespace-"]:hover:before {
    all: unset;
    // properties to be unset
}

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

[class*="namespace-"].namespace-box,
[class*="namespace-"].namespace-title,
[class*="namespace-"].namespace-text {
    // original properties
}

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

享受防弹容器。

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

问题描述

4 个解决方案

解决方案1
1 2012-07-23 09:37:44

解决方案2
1 已采纳 2013-02-10 21:27:43

解决方案3
0 2012-07-23 09:29:31

解决方案4
0 2016-02-03 09:54:41

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

问题描述

4 个解决方案

解决方案1 1 2012-07-23 09:37:44

解决方案2 1 已采纳 2013-02-10 21:27:43

解决方案3 0 2012-07-23 09:29:31

解决方案4 0 2016-02-03 09:54:41

解决方案1
1 2012-07-23 09:37:44

解决方案2
1 已采纳 2013-02-10 21:27:43

解决方案3
0 2012-07-23 09:29:31

解决方案4
0 2016-02-03 09:54:41