Chromium最近实现了一个HTML5的新特性:范围样式,又叫做。开发者可以通过为根元素设定一个添加了scoped属性的style标签,来限制样式只作用于style标签的子元素上。这会限制样式只影响style标签的父元素和它所有的后代元素。
例子
下面是一个使用了标准样式的简单页面:
a div! a span!
div {
color: red; }
span {
color: green; }
a div! a span!
a div! a span!
它设定的样式规则将使得所有的 a div!a span! 然而,如果我们为元素设置了scoped属性: 那么这个样式规则限制使得它们应用于元素的父 a div! a span! 当然我们可以在任何地方使用这个标签。所以如果你喜欢冒险,你可以在一个范围样式内添加尽可能多的范围样式来获取尽可能细的样式控制粒度。 用途 它有什么好处? 一种常见的用途是内容合并:当你作为一个网站的作者想嵌入来自第三方的内容(译者注:想想博客),包括它所有的样式风格,但是不想让这些样式“污染”页面其他无关的部分。其一个巨大的优势是可以将其他网站例如Yelp、Twitter、Ebay等的内容合并到一个单独页面,而无需使用或者动态的编辑外部内容来隔离它们。 如果你使用内容管理系统(CMS),它会发送许多标记片段来整合成为一个最终显示的页面。所以范围样式是一个伟大的功能,可以确保每一个片段与任何其他页面上的样式相隔离。这对wiki来说也一样的有用。 当你想在页面上展示一些漂亮的演示代码,很容易限制样式只作用于演示内容。你可以在演示随意的添加样式,而不用担心对页面上其他内容的影响。 它的另一个用途是简单的封装:例如,如果你的网页有一个侧边菜单,把指向菜单的样式封装到其中的段落会很有意义。这些样式规则对页面其他区域的渲染将不会有任何影响,这可以使得它可以很好地和主要内容进行分离! 它可能最引人注目的用途之一是用在Web组件模型上。Web组件将是一个构建像滑块、菜单、日期选择器和选项卡部件等的伟大方式。通过提供范围内的样式,设计人员可以构建一个组件并且将其打包成为一个独立的单位,其他人可以使用这个组件并组合为一个富Web应用程序。我们计划在Web组件和shadowDOM(已经可以在chrome://flags里开启实验性的“Shadow DOM”标志来启用)里大量使用范围样式。除了例如内联样式这样不好的方式,现在没有真正的好办法来确保样式限制在Web组件里,所以范围样式是一个完美的解决方案。 为什么包括父元素? 最自然的方式需要包括父元素,以便于规则可以来做为整个区域设置通用背景颜色这样类似的事情。它还允许采用“防守性”的方式来书写范围样式,通过为ID或者类选择器加上前缀的方式为还不支持的浏览器提供优雅降级。
a div!a span!
a div!a span!
a div! a span!
a div!a span!
a div! a span!