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

Question

We are developing a bookmarklet, and when the bookmarklet loads on different websites, eg: cnn.com, bbc.co.uk, yahoo.com it displays in various styles and we have struggle to reset these styles. 我们正在开发一个书签，当书签加载到不同的网站上时，例如：cnn.com，bbc.co.uk，yahoo.com，它以各种风格显示，我们很难重置这些样式。

The bookmarklet content is in the current page DOM and not in an iframe (because we need cookies and access to DOM). bookmarklet内容位于当前页面DOM中，而不是iframe中（因为我们需要cookie并访问DOM）。

We tried using CSS reset, but that resets only some basic stuff, like margins. 我们尝试使用CSS重置，但这只重置一些基本的东西，比如边距。 And pages where for example there is a custom form, or rounded table rectangles it inherits and it should not. 例如，有一个自定义表单的页面，或者它继承的圆形表矩形，它不应该。

Is there a way that we can completely isolate this DIV area in the current page to look only as we want? 有没有办法让我们可以完全隔离当前页面中的DIV区域，只显示我们想要的内容？

Answer 1

How about trying to replace your div with some obscure element that is unlikely to be on their pages. 试着用一些不太可能出现在他们页面上的模糊元素来替换你的div。

eg. 例如。 b or em or i or maybe even one of the newer html5 elements if you're not fussed about browser support. b或者em或i或者甚至是一个较新的html5元素，如果你不喜欢浏览器支持。

And styling them to display: block to function like a div which is a block element. 并将它们设置为display: block功能就像div ，是一个块元素。

Your resultant HTML is not going to be valid or pretty, but it's a bookmark so, meh. 你的结果HTML不会有效或漂亮，但它是一个书签，所以，嗯。

Short of that, a really good reset is what you'll need. 除此之外，你需要一个非常好的重置。

Or you'll just have to live with slight differences in your styling. 或者你只需要在造型方面略有不同。

Answer 2

We end up using https://github.com/premasagar/cleanslate 我们最终使用https://github.com/premasagar/cleanslate

CleanSlate is an extreme CSS reset stylesheet. CleanSlate是一个极端的CSS重置样式表。 It is used to reset the styling of an HTML element and all its children, back to default CSS values. 它用于将HTML元素及其所有子元素的样式重置为默认CSS值。 It is composed exclusively of !important rules, which override all other types of rules. 它完全由！important规则组成，它们覆盖所有其他类型的规则。

Answer 3

Well, you can use either the unique id and adding !important to each property afterwards - for resetting the generated element in the DOM - or you could use the new scoped attribute in "HTML5". 好吧，你可以使用唯一的id，然后在每个属性中添加！important - 用于重置DOM中生成的元素 - 或者你可以在“HTML5”中使用新的scoped属性。

But that may result in problems with all explicit "inherit" valued styles on that element or the parents. 但这可能会导致该元素或父母的所有显式“继承”值样式出现问题。 For example, relative font sizes will result in problems, too. 例如，相对字体大小也会导致问题。

Therefore is the experimental scoped attribute on the style section, but last time I tried it only Chrome/Chromium supported it, Firefox may have landed support for it recently, too - because there was a huge discussion on the mailing list. 因此是样式部分的实验性范围属性，但上次我尝试它时只有Chrome / Chromium支持它，Firefox最近也可能获得了对它的支持 - 因为在邮件列表上有一个很大的讨论。

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

Edit: 编辑：

Another solution could be to use a custom element that is not in the DOM by default. 另一种解决方案可能是使用默认情况下不在DOM中的自定义元素。 Something like document.createElement("thisisfrommyapp"); 像document.createElement（“thisisfrommyapp”）; You can style them like other elements, but have to apply display:block or whatever behaviour want for them. 您可以像其他元素一样设置样式，但必须应用display：block或者他们想要的任何行为。

Also, IE allows using them, but you actually need to insert them into Tridents' parser before. 此外，IE允许使用它们，但实际上您需要将它们插入Trident的解析器之前。 If you want to use them in HTML, you have to do the createElement() before the DOM is parsed (so it's most likely inside the head of your document). 如果要在HTML中使用它们，则必须在解析DOM之前执行createElement（）（因此它很可能位于文档的头部）。

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

You have to do the createElement stuff for Trident only, because otherwise you will result in weird parsing behaviours due to their display:inline-block defaulted model :) 你必须只为Trident做createElement的东西，因为否则你会因为它们的显示而导致奇怪的解析行为：inline-block默认模型:)

If you are using XHTML on the website for whatever stupid reasons (there are no valid reasons to use XHTML over HTML, due to parsers stripping out XML tags anyways), you should use a custom namespace for it. 如果您在网站上使用XHTML是出于任何愚蠢的原因（没有正当理由在HTML上使用XHTML，因为解析器无论如何都要剥离XML标记），您应该为它使用自定义命名空间。

~Cheers 〜干杯

Answer 4

Follow this 2 steps to sandbox a container. 按照以下两个步骤来沙箱容器。

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

Unset all properties of the container's namespace, all: unset; 取消all: unset;容器名称空间的所有属性， all: unset; is just a placeholder: 只是一个占位符：

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

Use a Grunt or Gulp task to add the attribute selector to your original CSS. 使用Grunt或Gulp任务将属性选择器添加到原始CSS。 This increases the cascade and prevents overrides by the unset hack: 这会增加级联并防止未设置的黑客覆盖：

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

You can automate the specification with the postcss-increase-specificity task. 您可以使用postcss-increase-specificity任务自动化规范。

Enjoy your bulletproofed container. 享受防弹容器。

如何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