原文出处：http://blog.csdn.net/hfahe/article/details/7381141
        Chromium 最近实现了一个HTML5的新特性：范围样式，又叫做<style scoped> 。开发者可以HTML5新特性：范围样式<style scoped>通过为根元素设定一个添加了scoped属性的style标签，来限制样式只作用于style标签的子元素上。这会限制样式只影响style标签的父元素和它所有的后代元素。

例子HTML5新特性：范围样式<style scoped>

下面是一个使用了标准样式的简单页面： 

<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新特性：范围样式的更多相关文章

  1. HTML5新特性之CSS+HTML5实例

    1.新的DOCTYPE和字符集 HTML5的一项准则就是化繁为简,Web页面的DOCTYPE被极大的简化. <!DOCTYPE html> 同时字符集声明也被简化了: <meta c ...

  2. html5新特性与用法大全了解一下

    有好多小伙伴私聊我问我html5新特性 和用法,下面我给大家具体介绍一下html5都新加了哪些新特性,下面我给大家总结一下. 1)新的语义标签 footer header 等等2)增强型表单 表单2. ...

  3. 第二季第八天 HTML5新特性

    在函数内部window.a =  a  在全局中就可以拿到这个变量 变量命名.作为函数的参数的时候要详细.调用的时候可以简单点 做全局变量的两个方案 1.绑在标签上data 2.闭包 视频一般都是二进 ...

  4. HTML5新特性--svg-echarts(重点)-拖动API-WebWorker

    一.html5新特性--svg--(折线/渐变特效对象/滤镜) #折线:多个坐标点组件一条折线 <polyline points="50,50 70,55 60,66 " s ...

  5. HTML5新特性-- -定时器

    一.定时器:一次性定时器/周期性定时器 #requestAnimationFrame 智能定时器 #此定时器主要使用范围:动画和游戏中 特点: setTimeout(fn,500); setInter ...

  6. html5新特性

    这一篇博文不会告诉你怎么去使用html5的新特性,只会给你总结一下新特性------对于好学的人可以把这篇文章当做一个目录 对于初接触的人来说是一个导向 对于已经接触过的人来说是一个检测你掌握程度的检 ...

  7. 转: HTML5新特性之Mutation Observer

    转: HTML5新特性之Mutation Observer Mutation Observer是什么 Mutation Observer(变动观察器)是监视DOM变动的接口.当DOM对象树发生任何变动 ...

  8. HTML5新特性：FileReader 和 FormData

    连接在这里: HTML5新特性:FileReader 和 FormData

  9. web全栈架构师[笔记] — 03 html5新特性

    HTML5新特性 一.geolocation PC端 精度比较低 通过IP库定位 移动端 通过GPS window.navigator.geolocation 单次 getCurrentPositio ...

随机推荐

  1. xss总结漏洞篇

    Xss漏洞 Xss漏洞出现在1996年.Xss漏洞又名跨站脚本漏洞 Xss可能造成的危害 网站弹框(刷流量) 网站挂马 会话劫持 Cookie被盗取 用户提权 账号被盗 尽量DDOS 蠕虫攻击 Xss ...

  2. convolution-卷积神经网络

    训练mnist数据集 结构组成: input_image --> convolution1 --> pool1 --> convolution2 --> pool2 --> ...

  3. C宏定义

    宏定义中宏名一般用大写,用以和一般的变量名区分开来,但是用宏名用小写也没有错; 对程序中用双引号括起来的字符串内的字符,不进行宏替换操作, #include<stdio.h> #defin ...

  4. 代码： 日期和时间 datepicker

    bootstrap 的相关的时间插件 http://www.bootcss.com/p/bootstrap-datetimepicker/ jquery ui的日期插件 http://www.w3cs ...

  5. 使用AngularJS处理单选框和复选框的简单方法

    在复选框中,可以绑定ng-model给false或者true值,即可选中或清除选中状态 如下图 而在单选框里就相对复杂一点,单选框要选中一个,就要给相同的name属性,然后绑定相同的ng-model, ...

  6. 使用matplotlib 制图（柱状图、箱型图）

    柱状图: import pandas as pd import matplotlib.pyplot as plt data = pd.read_csv('D:\\myfiles\\study\\pyt ...

  7. jquery formValidator 表单验证插件, ajax无法传值到后台问题的解决

    今天使用jquery   formValidator-4.0.1 这个插件做表单验证,  前台验证已写好, 准备写ajax验证, 结果无法把值传到后台 .ajaxValidator({ url : & ...

  8. Python中的操作符重载

    运算符重载是指在方法中拦截内置的操作----当类的实例出现在内置操作中,Python会自动调用自定义的办法,并且返回自定义方法的操作结果.     类可以重载python的操作符 操作符重载使我们的对 ...

  9. TCP/IP知识总结（TCP/IP协议族读书笔记二）

    接下来,总结一下网络层的协议,IP,ARP,RARP,ICMP,IGMP.当我们在网络传输的过程中,把分组交付到主机或路由器需要两级地址:物理地址和逻辑地址.而且我们需要能够把物理地址映射成为相应的逻 ...

  10. 面向对象三大特性一一继承(inheritance)和组合(Composition）

    记住2句话(常识),像个正常人思考! 1.“  is-a ”关系 用 继承! 学生是人,学生继承人这个类, 2. “has-a ”关系 用 组合!电脑有显卡,那么我们就在计算机类中增加显卡属性来复用显 ...