网站链接: 我爱捣鼓
当前位置: 首页 > 前端开发  > html5

实例让您弄清楚HTML5范围样式scoped的使用方法

2021/3/21 15:16:21

Chromium 最近实现了一个HTML5的新特性:范围样式,又叫做<style scoped> 。开发者可以通过为根元素设定一个添加了scoped属性的style标签,来限制样式只作用于style标签的子元素上。这会限制样…

最近开发项目,用到了一个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),它会发送许多标记片段来整合成为一个最终显示的页面。

        当你想在页面上展示一些漂亮的演示代码,很容易限制样式只作用于演示内容。你可以在演示随意的添加样式,而不用担心对页面上其他内容的影响。

        它的另一个用途是简单的封装:例如,如果你的网页有一个侧边菜单,把指向菜单的样式封装到其中的<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选择器可以简单地被丢弃时。

        今天我们详细聊了聊范围样式,这下知道怎么使用它,并如何把范围样式应用到实际的项目中......

     


相关资讯

  • html5新增元素document.queryselector属性

    document.queryselector其实也不算是html5的新增元素,它只是继承了html4的属性,今天我们就来说说document.queryselector属性如何使用? 先看一个实例,结合实例分析一下:<!DOCTYPE html><html><head> <meta charset="UTF-8"&a…

    2021/5/9 14:06:38
  • html5身份证照片上传及预览缩略图-附源码

    html5页面上传图片很方便,主要用到了html5的FileReader方法,今天我们就通过身份证照片上传作为例子来说说它的用法。调用FileReader对象的方法FileReader 的实例拥有 4 个方法,其中 3 个用以读取文件,另一个用来中断读取。下面的表格列出了这些方法以及他们的参数和功…

    2021/3/28 10:52:43
  • 用实例告诉你html5画图功能如何使用?附源码

    在html5中可以使用canvas标签在画布上画图,先直接上代码,这篇文章先简单介绍一下canvas的使用方法,简单画几个圆,矩形,三角形,写字。在代码中均给出了注释,在这里特别强调的一点是:使用canvas画图时有时候必须beginPath和colsePath,但有时不需要,为了防止出现问题…

    2021/3/21 14:51:36
  • 实例告诉您HTML5的WEB SQL数据库如何使用?含源码

    Web SQL数据库API实际上未包含在HTML 5规范之中,它是一个独立的规范,它引入了一套使用SQL操作客户端数据库的API。假设你是一名优秀的Web开发人员,那毫无疑问,你对SQL和数据库的相关概念已经很熟悉了,如果你对SQL不熟悉,那在继续阅读本文之前,最好先学习一下SQL相关…

    2021/3/9 22:21:35
  • HTML5如何实现浏览器页面全屏显示及退出全屏的效果?

    在越来越真实的web应用程序中,JavaScript也变得越来越给力.FullScreen API 是一个新的JavaScript API,简单而又强大. FullScreen 让我们可以通过编程的方式来向用户请求全屏显示,如果交互完成,随时可以退出全屏状态.在线演示Demo: Fullscreen API Example(在此Demo中,可…

    2021/3/9 22:17:42