10

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

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

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

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

4

4 回答 4

1

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

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

于 2013-02-10T21:27:43.373 回答
1

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

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

并将它们设置display: block为像div块元素一样运行。

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

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

或者你只需​​要忍受你的造型略有不同。

于 2012-07-23T09:37:44.390 回答
0

好吧，您可以使用唯一的 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 标记），您应该为它使用自定义命名空间。

~干杯

于 2012-07-23T09:29:31.990 回答
0

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

<div class="namespace-box">
    <h1 class="namespace-title">Title</h1>
    <p class="namespace-text">Text</p>
</div>
  1. 取消设置容器命名空间的所有属性，all: unset;只是一个占位符：
[class*="namespace-"],
[class*="namespace-"]:之后，
[class*="namespace-"]：之前，
[class*="namespace-"]:hover:after,
[class*="namespace-"]:hover:before {
    全部：未设置；
    // 要取消设置的属性
}
  1. 使用 Grunt 或 Gulp 任务将属性选择器添加到您的原始 CSS。这增加了级联并防止未设置的黑客覆盖：
[class*="namespace-"].namespace-box,
[class*="namespace-"].namespace-title,
[class*="namespace-"].namespace-text {
    // 原始属性
}

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

享受您的防弹容器。

于 2016-02-03T09:54:41.623 回答