没有HTML5的范围样式表 [英] Scoped Style Sheets without HTML5
问题描述
我需要一种方法，我可以将CSS文件放在页面的某一部分。理论上，这个例子应该做我需要的：
< html>
< head>
< / head>
< body>
< div>
< style scope>
@import url（style1.css）;
< / style>
< div class =testText>用样式1测试< / div>
< / div>
< div>
< style scope>
@import url（style2.css）;
< / style>
< div class =testText>用样式2测试< / div>
< / div>
< / body>
< / html>但是，我发现scope元素只在某些浏览器中可用（Firefox 21+）主要）。所以，我正在寻找一个懒惰的出路或问题。我需要将一些内容与不同的样式集成到一个网站。我们尝试加载两个css文件集，但是有一些样式名称出现在两个样式表中，所以重命名一个文件集中的样式名称和相应的html内容将是很多工作，特别是因为你不能只是重构Eclipse ...：）
有没有其他解决方案可以提供这样一个广泛兼容的结果？
Regards
解决方案范围样式在这一点上不能得到很好的支持，如果你期望任何种类的跨浏览器覆盖。
真正实现你所追求的唯一方法是对每个section使用唯一的类名（或ID）然后使用继承来排序你的CSS的命名空间。所以如果你想定位页面的一个特定部分，给它的父母一个类名（例如： class =testone），然后确保任何样式应用于该部分附加该类名：
.testone .title {...}
.testone h1 {...}
.testone a {...
>
如果没有，还有一个 jQuery-基于内容的范围polyfill ，应该给你一个更独立于浏览器的方式使用范围CSS。这不是我工作过的，所以没有任何经验，但它看起来非常有前途从我已经花了它的几个时刻！
请记住，像这样的任何基于JavaScript的解决方案，任何人加载您的页面没有启用JavaScript启用不会得到那些小额外的细节，所以重要的是确保页面仍然以可接受的方式行为，即使在JS已禁用。
I am needing an approach where I can scope CSS files to a certain portion of the page. In theory, this example should do what I need:
<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>
However, I found out that the scope element is only available in some browsers right now (Firefox 21+ mainly). So, I'm looking for a lazy way out or a problem. I need to integrate some content with different styles into a site. We tried loading both css filesets, but there are some style names that appear in both stylesheets, so it will be a lot of work to rename the style names in one fileset and in the corresponding html content, specially because you cannot just refactor with Eclipse... :)
Is there any other solution that can render such a result that is widely compatible?
Regards
解决方案 Scoped styles aren't well-supported at this point and are going to cause you problems if you're expecting any sort of cross-browser coverage.
The only way you can really achieve what you're after is to use a unique classname (or ID) for each 'section' and then use inheritance to sort-of namespace your CSS. So if you want to target one specific section of the page, give it's parents a classname (eg: class="testone") and then make sure that any styles you want to apply to that section are appended with that classname:
.testone .title{...}
.testone h1{...}
.testone a{...
etc.
Failing that, there is also a jQuery-based scope polyfill which should give you a more browser-independent way of working with scoped CSS. It isn't something I've worked with so don't have any experience to offer, but it looks very promising from the few moments I've spent with it!
Do remember that as with any JavaScript-based solution like this one, anyone who loads your page without JavaScript enabled isn't going to get those little extra niceties so it's important to ensure that the page still behaves in an acceptable manner even when JS is disabled.
这篇关于没有HTML5的范围样式表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
