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组件模型上。Web组件将是一个构建像滑块、菜单、日期选择器和选项卡部件等的伟大方式。通过提供范围内的样式，设计人员可以构建一个组件并且将其打包成为一个独立的单位，其他人可以使用这个组件并组合为一个富Web应用程序。 我们计划在Web组件和shadowDOM（已经可以在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被忽略掉了，因为现在有一个很好的机会来调整这个规范。

我们鼓励每个对这个特性感兴趣的人都来尝试一下，让我们知道你的反馈：好、不好以及（可能）不足。

HTML5的新特性：范围样式，又叫做<style scoped>的更多相关文章

  1. Atitti html5 h5 新特性attilax总结

    Atitti html5 h5 新特性attilax总结 Attilax觉得不错的新特性 3.语义Header和Footer (The Semantic Header and Footer) 8.占位 ...

  2. Atitit html5.1 新特性attilax总结

    Atitit html5.1 新特性attilax总结 9. 嵌入 header 和 footer1 7. 校验表单1 6. 浏览器的上下文菜单2 1. 响应式图像2 Attilax觉得还不错的心特性 ...

  3. 浅谈HTML5的新特性

    2014年10月29日,W3C宣布,经过接近8年的艰苦努力,HTML5标准规范终于制定完成. HTML5将会取代1999年制定的HTML 4.01.XHTML 1.0标准,使网络标准达到符合当代的网络 ...

  4. 28个你必须知道的HTML5的新特性,技巧以及技术

    崭新新的页面布局 传统的: HTML5: 1. 新的Doctype 尽管使用<!DOCTYPE html>,即使浏览器不懂这句话也会按照标准模式去渲染 2. Figure元素 用<f ...

  5. HTML5的新特性及技巧分享总结

    原文链接:http://www.aseoe.com/show-10-645-1.html?utm_source=tuicool&utm_medium=referral 1. 新的Doctype ...

  6. 28个你必须知道的HTML5的新特性，技巧以及技术

    原文地址:http://adamlu.com/?p=584#header 总结一下: 1. 新的Doctype 尽管使用<!DOCTYPE html>,即使浏览器不懂这句话也会按照标准模式 ...

  7. HTML5 的新特性以及新标签的浏览器兼容问题

    新特性: HTML5 现在已经不是 SGML 的子集,主要是关于图像,位置,存储,多任务等功能的增加. 1)  拖拽释放(Drag and drop) API 2)  语义化更好的内容标签(heade ...

  8. 浅谈html5及其新特性

    什么是 HTML5? HTML5 将成为 HTML.XHTML 以及 HTML DOM 的新标准. HTML 的上一个版本诞生于 1999 年.自从那以后,Web 世界已经经历了巨变. HTML5 仍 ...

  9. 使用Modernizr探测HTML5/CSS3新特性（转载）

    转载地址:http://www.cnblogs.com/TomXu/archive/2011/11/18/detecting-html5-css3-features-using-modernizr.h ...

随机推荐

  1. Delphi Tokyo 10.2.3发布了

    Delphi Tokyo 10.2.3发布了 http://blog.sina.com.cn/s/blog_44fa172f0102wwwg.html (2018-03-14 07:51:32) 转载 ...

  2. win7旗舰版C盘无写入权限别拒绝怎么办？ 精选

    win7旗舰版C盘无写入权限别拒绝怎么办? 精选 https://zhidao.baidu.com/question/366277826663554972.html 浏览 42 次 1个回答 [热点话 ...

  3. C++：利用如下公式，编写函数计算∏的值，直到最后一项的绝对值小于e,主程序接收从键盘输入的e，输出∏的值（保留5位小数）。 ∏/4 = 1-1/3+1/5-1/7...

    利用如下公式,编写函数计算∏的值,直到最后一项的绝对值小于e,主程序接收从键盘输入的e,输出∏的值(保留5位小数). ∏/4 = 1-1/3+1/5-1/7... #include <iostr ...

  4. 问题记录 | deepin15.10重装nvidia驱动及cuda

    问题描述: nvidia-smi也有显示,显卡驱动是在的,而且nvcc显示出来的cuda版本9.0也没错,不是9.1.不知道问题所在,索性重装全部. sudo tee /proc/acpi/bbswi ...

  5. javascript 异常处理

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  6. 书籍：wpf学习书籍介绍

    WPF参考书推荐 下面先整理下,本人主要学习的WPF参考书: 1.WPF编程宝典(C#2010) 该书:(必读) 心得体会:读完该书后,你对WPF的基础和基本控件的使用,包括WPF的编程模型,相比Wi ...

  7. 1~n的全排列--阅文集团2018校招笔试题

    题目大意:给定整数n,求出1~n的全排列 示例 输入:n=3 输出:[1,2,3],[1,3,2],[2,1,3],[2,3,1],[3,1,2],[3,2,1] import java.util.S ...

  8. [Jupyter Notebook] 01 这么多快捷键，我可顶不住！先记个八成吧

    0. 一些说明 为了入门 Python3 安装了 Anaconda,它集成了 Jupyter Notebook 1. 调出快捷键表 打开 Jupyter Notebook,新建一个 Python3(我 ...

  9. kubernetes快速应用入门

    kubectl 就是 api server的客户端工具 创建一个nginx的pod [root@master ~]# kubectl run nginx-deploy --image=nginx:1. ...

  10. Android的Monkey和MonkeyRunner

    本文部分解释性语段摘自网络百科或其它BLOG,语句内容网络随处可见,也不知道谁是初始原创,便不再署名出处,如有雷同,还请见谅. Monkey 什么是Monkey Monkey是Android中的一个命 ...