html5新特性,html5有什么新的特性
Chromium最近实现了HTML5的一个新特性：range style，也称为style scoped。开发人员可以为根元素设置一个带有scoped属性的样式标记，这样样式就只能应用于样式标记的子元素。这将限制样式仅影响样式标签的父元素及其所有后代。
例子
下面是一个使用标准样式的简单页面：
html body div一个div！跨一跨！/span/div div style div { color:red；} span { color:绿色；} /style a div！跨一跨！/span /div div一个div！跨一跨！/span/div/body/html它设置的样式规则将使所有div变为红色，span变为绿色：
一个div！一个跨度！
一个div！一个跨度！
一个div！一个跨度！
但是，如果我们为style元素设置了scoped属性：
html body div一个div！跨一跨！/span /div div样式范围的div { color:red；} span { color:绿色；} /style a div！跨一跨！/span /div div一个div！跨一跨！/span /div /body /html，则此样式规则将它们限制为应用于样式范围元素的父div元素及其内部的所有元素。我们称之为“范围”，结果如下：
一个div！一个跨度！
一个div！一个跨度！
一个div！一个跨度！
当然，我们可以在任何地方使用这个标签。因此，如果您喜欢冒险，可以在一个范围样式中添加尽可能多的范围样式，以获得尽可能精细的样式控制。
使用
有什么好处？
一种常见的用法是内容合并：当你作为一个网站的作者，想要嵌入来自第三方(译者注：think blog)的内容，包括其所有的样式，但又不想让这些样式“污染”页面其他不相关的部分。它的一个很大的优点就是可以把其他网站的内容，比如Yelp，Twitter，Ebay等等，组合成一个页面，而不需要使用iframe或者动态编辑外部内容来隔离它们。
如果您使用内容管理系统(CMS ),它将发送许多标记片段以集成到最终显示的页面中。因此，范围样式是一个很好的特性，可以确保每个片段都与任何其他页面上的样式隔离开来。这对wiki同样有用。
当您想在页面上展示一些漂亮的演示代码时，很容易将样式限制为仅展示演示内容。您可以随意在演示文稿中添加样式，而不必担心对页面上其他内容的影响。
它的另一个用途是简单的封装：例如，如果你的网页有一个侧菜单，封装指向菜单的样式范围的段落是有意义的。这些样式规则不会对页面其他区域的渲染产生任何影响，可以使其与主要内容很好的分离！
也许它最引人注目的用途之一是在Web组件模型中。Web组件将是构建滑块、菜单、日期选择器和标签部件的好方法。通过提供范围内的样式，设计者可以构建一个组件并将其打包成一个独立的单元，其他人可以使用该组件并将其组合成一个丰富的Web应用程序。我们计划在Web组件和shadowDOM中广泛使用范围样式(已经可以通过在chrome://flags中打开实验性的“Shadow DOM”徽标来启用)。除了内联样式这样的坏方法之外，没有真正好的方法来确保样式只限于Web组件，所以范围样式是一个完美的解决方案。
为什么包括父元素？
最自然的方法是包含父元素，这样样式范围的规则就可以为整个区域设置公共背景色。它还允许以“防御性”的方式编写范围样式，并通过在ID或类选择器前面加上前缀，为不支持样式范围的浏览器提供了优雅的降级。
div=" menu " style scoped # menu . main {…} # menu . sub {…}…这种模仿可以达到“范围样式”的效果，但是会有一些运行时性能的损失，因为选择器比较复杂。这种方法的优点是它采用了一种优雅的降级方法，这样我们就可以等到样式范围得到广泛支持，ID选择器可以被简单地丢弃。
情况
由于scope style的实现是最新的，目前隐藏在Chrome的运行时logo中。要激活它，你需要下载版本号为19或更高的Chrome(现在是Chrome Canary)，然后在chrome://flags中找到“Open stylescoped”选项(靠近末尾)，点击“Enable”并重启浏览器。
目前没有已知的bug，但是@keyframes和@-webkit-region区域版本还在实现中。况且@font-face已经被忽略了，因为现在有一个调整这个规范的好机会。
我们鼓励每一个对这种特殊兴趣感兴趣的人尝试一下，并让我们知道你的反馈：好的，坏的和(可能)不足的。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。