没有使用HTML5的作用域样式表

Question

没有使用HTML5的作用域样式表

12

我需要一种方法，可以将CSS文件限定在页面的某个特定部分。理论上，这个例子应该满足我的需求：

<html>
<head>
</head>
<body>

    <div>
        <style scope>
            @import url("style1.css");
        </style>
        <div class="testText">Test with Style 1</div>
    </div>
    <div>
        <style scope>
            @import url("style2.css");
        </style>
        <div class="testText">Test with Style 2</div>
    </div>
</body>
</html>

然而，我发现目前只有一些浏览器支持 scope 元素（主要是 Firefox 21+）。因此，我正在寻找一个简单的方法或解决方案。我需要将一些具有不同样式的内容集成到网站中。我们尝试加载两个 CSS 文件集，但是有些样式名称在两个样式表中都出现，因此重命名一个文件集中的样式名称以及相应的 HTML 内容将会很麻烦，特别是因为你不能只是通过 Eclipse 进行重构... :)

是否有其他解决方案可以广泛兼容并呈现这样的结果？

敬礼

- Martin

Chrome 也支持作用域样式。 - gustavohenke

@gustavohenke 默认情况下不支持，因此可以假设它在Chrome上不可用。 - Rob W

1

Rob W是正确的，在Chrome上您需要启用实验模式。我正在寻找的是一种替代方案，可以与IE8+和Firefox 17+一起使用...如果这意味着使用某些CSS框架或其他技巧，那就没问题了，只是想看看是否有其他方法... - Martin

1

基于你对当前答案的回复，我建议你看一下 LESS。嵌套规则特性是解决你问题的一个吸引人的方案。由于 LESS 只是 CSS 的超集，学习和使用它会非常容易。 - Rob W

2个回答

2

HTML5草案中的属性名称为"scoped"，而不是"scope"。

尽管对其提供支持的速度较慢，但使用该属性或有限的样式表的原因很少。大多数浏览器会将"

- Jukka K. Korpela

3

不再支持了。几乎所有的浏览器都已经停止支持它了。 - iGanja

确实，但我记得有一个替代品正在开发中。不过我忘了它叫什么。 - Max Murphy

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- johnkavanagh · Accepted Answer

局部样式在目前还不太支持，如果您希望实现跨浏览器覆盖，使用它们可能会导致问题。

您真正想要实现的唯一方法是为每个“部分”使用唯一的类名（或ID），然后使用继承来对CSS进行命名空间管理。因此，如果您想要针对页面的某个特定部分进行定位，请为其父元素添加一个类名（例如：class="testone"），然后确保任何要应用于该部分的样式都附加了该类名：

.testone .title{...}
.testone h1{...}
.testone a{...

如果不行，您也可以使用基于jQuery的作用域polyfill，它能够提供一种更独立于浏览器的方式来处理scoped CSS。尽管我没有使用过，但是从我短暂的了解中看起来非常有前途！

请记住，与任何JavaScript解决方案一样，禁用JavaScript的用户将无法获得额外的美好体验，因此确保页面在禁用JS时仍能正常运行是很重要的。