h5新特性:<style scoped>
来源:互联网 发布:可可网络验证x系列 编辑:程序博客网 时间:2024/06/05 04:58
h5的新特性:范围样式,又叫 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>
效果:
<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>
用途
它有什么好处?
一种常见的用途是内容合并:当你作为一个网站的作者想嵌入来自第三方的内容(译者注:想想博客),包括它所有的样式风格,但是不想让这些样式“污染”页面其他无关的部分。其一个巨大的优势是可以将其他网站例如Yelp、Twitter、Ebay等的内容合并到一个单独页面,而无需使用<iframe>
或者动态的编辑外部内容来隔离它们。
如果你使用内容管理系统(CMS),它会发送许多标记片段来整合成为一个最终显示的页面。所以范围样式是一个伟大的功能,可以确保每一个片段与任何其他页面上的样式相隔离。这对wiki来说也一样的有用。
当你想在页面上展示一些漂亮的演示代码,很容易限制样式只作用于演示内容。你可以在演示随意的添加样式,而不用担心对页面上其他内容的影响。
它的另一个用途是简单的封装:例如,如果你的网页有一个侧边菜单,把指向菜单的样式封装到其中的<style scoped>
段落会很有意义。这些样式规则对页面其他区域的渲染将不会有任何影响,这可以使得它可以很好地和主要内容进行分离!
它可能最引人注目的用途之一是用在Web组件模型上。Web组件将是一个构建像滑块、菜单、日期选择器和选项卡部件等的伟大方式。通过提供范围内的样式,设计人员可以构建一个组件并且将其打包成为一个独立的单位,其他人可以使用这个组件并组合为一个富Web应用程序。 我们计划在Web组件和shadowDOM(已经可以在chrome://flags里开启实验性的“Shadow DOM”标志来启用)里大量使用范围样式。除了例如内联样式这样不好的方式,现在没有真正的好办法来确保样式限制在Web组件里,所以范围样式是一个完美的解决方案。
为什么包括父元素?
最自然的方式需要包括父元素,以便于
<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://blog.csdn.net/hfahe/article/details/7381141
- h5新特性:<style scoped>
- h5新特性:<style scoped>
- HTML5新特性:范围样式<style scoped>
- HTML5新特性:范围样式<style scoped>
- HTML5新特性:范围样式<style scoped>
- HTML5新特性:范围样式<style scoped>&&在vue组件中style scoped
- h5新特性
- H5—新特性
- H5的新特性
- H5新特性
- h5新特性;
- H5新特性总结
- H5新特性
- H5新特性
- H5新特性学习
- H5新特性汇总
- input H5新特性
- H5的新特性
- ubuntu下解压缩zip,tar,tar.gz,tar.bz2
- WPF 初学体验-Binding
- Android中Menu的基本用法
- windows修改tomcat运行JDK版本
- 消息转发机制与Aspects源码解析
- h5新特性:<style scoped>
- PHP安全编程:文件包含的代码注入攻击
- 机器学习(二十一)——Optimizer, 单分类SVM&多分类SVM, 时间序列分析
- altium designer PCB3D模型资源 网站
- 人工智能时代——人工智能的白发航海家
- Tmux使用方法
- DES加密/解密 8字节、16字节、24字节 CBC模式接口 可直接在MCU上运行
- PL/SQL Developer安装配置实践
- IO多路复用之poll总结