HTML5新特性：范围样式 · Web前端-关注HTML5与CSS3

Chromium 最近实现了一个HTML5的新特性：范围样式，又叫做<style scoped> 。开发者可以通过为根元素设定一个添加了scoped属性的style标签，来限制样式只作用于style标签的子元素上。这会限制样式只影响style标签的父元素和它所有的后代元素。 **例子** 下面是一个使用了标准样式的简单页面： ~~~ <html> ~~~ ~~~ <body> ~~~ ~~~ <div>a div! <span>a span!</span></div> ~~~ ~~~ <div> ~~~ ~~~ <style> ~~~ ~~~ div { color: red; } ~~~ ~~~ span { color: green; } ~~~ ~~~ </style> ~~~ ~~~ a div! <span>a span!</span></div> ~~~ ~~~ <div>a div! <span>a span!</span></div> ~~~ ~~~ </body> ~~~ ~~~ </html> ~~~ 它设定的样式规则将使得所有的<div>变为红色，<span>变成绿色： a div! a span! a div! a span! a div! a span! 然而，如果我们为<style>元素设置了scoped属性： ~~~ <html> ~~~ ~~~ <body> ~~~ ~~~ <div>a div! <span>a span!</span></div> ~~~ ~~~ <div> ~~~ ~~~ <style scoped> ~~~ ~~~ div { color: red; } ~~~ ~~~ span { color: green; } ~~~ ~~~ </style> ~~~ ~~~ a div! <span>a span!</span></div> ~~~ ~~~ <div>a div! <span>a span!</span></div> ~~~ ~~~ </body> ~~~ ~~~ </html> ~~~ 那么这个样式规则限制使得它们应用于<style scoped>元素的父<div>元素及其内部的所有元素上。我们称之为“范围”，结果如下所示： a div! a span! a div! a span! a div! a span! 当然我们可以在任何地方使用这个标签。所以如果你喜欢冒险，你可以在一个范围样式内添加尽可能多的范围样式来获取尽可能细的样式控制粒度。 **用途** 它有什么好处？一种常见的用途是内容合并：当你作为一个网站的作者想嵌入来自第三方的内容（译者注：想想博客），包括它所有的样式风格，但是不想让这些样式“污染”页面其他无关的部分。其一个巨大的优势是可以将其他网站例如Yelp、Twitter、Ebay等的内容合并到一个单独页面，而无需使用<iframe>或者动态的编辑外部内容来隔离它们。如果你使用内容管理系统（CMS），它会发送许多标记片段来整合成为一个最终显示的页面。所以范围样式是一个伟大的功能，可以确保每一个片段与任何其他页面上的样式相隔离。这对wiki来说也一样的有用。当你想在页面上展示一些漂亮的演示代码，很容易限制样式只作用于演示内容。你可以在演示随意的添加样式，而不用担心对页面上其他内容的影响。它的另一个用途是简单的封装：例如，如果你的网页有一个侧边菜单，把指向菜单的样式封装到其中的<style scoped>段落会很有意义。这些样式规则对页面其他区域的渲染将不会有任何影响，这可以使得它可以很好地和主要内容进行分离！它可能最引人注目的用途之一是用在[Web组件](http://translate.googleusercontent.com/translate_c?act=url&hl=zh-CN&ie=UTF8&prev=_t&rurl=translate.google.com.hk&sl=en&tl=zh-CN&u=http://dvcs.w3.org/hg/webcomponents/raw-file/tip/explainer/index.html&usg=ALkJrhgTnofhqhYUvflMbbMgrds2IePEKA)模型上。Web组件将是一个构建像滑块、菜单、日期选择器和选项卡部件等的伟大方式。通过提供范围内的样式，设计人员可以构建一个组件并且将其打包成为一个独立的单位，其他人可以使用这个组件并组合为一个富Web应用程序。我们计划在Web组件和[shadowDOM](http://dvcs.w3.org/hg/webcomponents/raw-file/tip/spec/shadow/index.html)（已经可以在chrome://flags里开启实验性的“Shadow DOM”标志来启用）里大量使用范围样式。除了例如内联样式这样不好的方式，现在没有真正的好办法来确保样式限制在Web组件里，所以范围样式是一个完美的解决方案。 **为什么包括父元素？** 最自然的方式需要包括父元素，以便于<style scoped>规则可以来做为整个区域设置通用背景颜色这样类似的事情。它还允许采用“防守性”的方式来书写范围样式，通过为ID或者类选择器加上前缀的方式为还不支持<style scoped>的浏览器提供优雅降级。 ~~~ <div id=”menu”> ~~~ ~~~ <style scoped> ~~~ ~~~ #menu .main { … } ~~~ ~~~ #menu .sub { … } ~~~ … 这种模仿可以实现“范围样式”的效果，但是因为更复杂的选择器会有一些运行时的性能损失。这种做法的好处是，它采用一个优雅的降级方法让我们可以等到<style scoped>被广泛支持和ID选择器可以简单地被丢弃时。 **状态** 鉴于范围样式的实现是最新的，它目前被隐藏在Chrome的运行时标志里。要激活它，你需要下载版本号为19或者更高的Chrome（现在的Chrome Canary），然后在chrome://flags里找到“开启<stylescoped>”选项（靠近最后），单击“启用”，然后重新启动浏览器。目前没有已知bug，但是@keyframes和@-webkit-region区域范围的版本还正在实现中。此外，@font-face被忽略掉了，因为现在有一个很好的机会来调整这个规范。我们鼓励每个对这个特性感兴趣的人都来尝试一下，让我们知道你的反馈：好、不好以及（可能）不足。译自：[http://updates.html5rocks.com/2012/03/A-New-Experimental-Feature-style-scoped](http://updates.html5rocks.com/2012/03/A-New-Experimental-Feature-style-scoped) 转载请注明：[蒋宇捷的博客](http://blog.csdn.net/hfahe)