Question

CSS沙箱我的意思是我的布局中有一个完全独立的外观。我需要这个，因为我的某些类需要在布局中输出一些内容的“窗口”，但我不希望应用程序的css弄乱它们。它们主要与调试相关，如打印var内容，基准图或显示一些错误/异常。

到目前为止，我正在进行某种本地重置，但是如果我忘记了一些规则，这对于避免冲突会非常烦人，并且可能会失败。例如：

html body div.eh-box {
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    font-size: 100% !important;
    vertical-align: baseline !important;
    background-color: #fff !important;
    font: 12px/12px 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
    margin-bottom: 20px !important;
}

html body div.eh-box * {
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    font-size: 100% !important;
    font: inherit !important;
    vertical-align: baseline !important;
    color: #333 !important;
}

html body div.eh-box .title {
    font-size: 50px !important;
    line-height: 75px !important;
    /*font-weight: bold !important;*/
}

html body div.eh-box .desc {
    font-size: 24px !important;
    line-height: 36px !important;
}

Answer 1

我对它知之甚少，但我认为这或多或少是Shadow DOM所做的

Answer 2

您可以创建一个带有ID的容器元素，然后重置其规则（确保最后加载此部分）。您可能遇到的唯一问题是!important规则，但您也可以在重置部分使用这些规则（不是真正推荐的练习，但它会起作用）。

此外，根据您网站的结构，您可能希望尽可能具体地调用您的容器元素，例如body #top_element #another_top_element #container，以便为其提供更高的优先级，但在大多数情况下，这不会是必要的......

Answer 3

另一种可能的解决方案 - 取决于您的应用程序，是在iframe中加载该布局部分 - 这是一个完全独立的文档，受一组单独的样式限制。不确定我是否需要提及使用框架存在某些缺点。

Answer 4

有一种称为 Scoped CSS

的技术

您不能再使用它[1]，但是可以尝试使用polyfill [2]。

[1] https://caniuse.com/#feat=style-scoped

[2] https://github.com/PM5544/scoped-polyfill

是否有一种无痛的方式来制作“css沙箱”？

4 个答案: