您当前的位置:首页 > 电脑百科 > 程序开发 > 语言 > CSS

CSS新特性@layer(层叠样式表)

时间:2022-03-18 10:29:16  来源:  作者:Mason程

过往 css 优先级中存在的问题

如果我们的页面上存在非常多的样式,譬如有我们开发页面的时候的自定义样式,也有引入的组件库样式。这时候样式将会非常混乱难以管理。

当我们想覆盖一些本身非我们书写的样式时候,往往不得不通过使用优先级权重更高的样式名,去覆盖那些样式。

同时,当样式优先级感到难以控制时,开发者习惯滥用 !important 去解决,这又循环导致了后续更混乱的样式结构。

基于让 CSS 得到更好的控制和管理的背景,CSS @layer 应运而生。

何为 CSS @layer?

CSS Cascade Layers,也叫做CSS级联层,是Cascading and Inheritance Level5 规范中新增了一个新的 CSS 特性。

@layer声明了一个 级联层, 同一层内的规则将级联在一起, 这给予了开发者对层叠机制的更多控制。语法也非常简单,看这样一个例子:

@layer utilities {

  /* 创建一个名为 utilities 的级联层 */

}

这样,我们就创建一个名为 utilities 的 @layer 级联层。

@layer语法

@layer规则可以通过三种方式其一来创建级联层。第一种方法如上方代码所示,它创建了一个块级的@规则,其中包含作用于该层内部的CSS规则。

@layer utilities {

  .padding-sm {

    padding: .5rem;

  }




  .padding-lg {

    padding: .8rem;

  }

}

一个级联层同样可以通过 @import 来创建,规则存在于被引入的样式表内:

@import(utilities.css) layer(utilities);

你也可以创建带命名的级联层,但不指定任何样式。例如,单一的命名层:

@layer utilities

或者,多个命名层也可以被同时定义。例如:

@layer theme, layout, utilities

这一做法很有用,因为层最初被指定的顺序决定了它是否有父级层。对于声明而言,如果同一声明在多个级联层中被指定,最后一层中的将优先于其他层。

因此,在上面的例子中,如果 theme 层和 utilities 层中存在冲突的规则,那么 utilities 层中的将优先被应用。

即使 utilities 层中规则的 优先级低于 theme 层中的,该规则仍会被应用。一旦级联层顺序建立之后,优先级和出现顺序都会被忽略。

这将使创建CSS选择器变得更加简单,因为你不需要确保每一个选择器都有足够高的优先级来覆盖其他冲突的规则,你只需要确保它们出现在一个顺序更靠后的级联层中。

:在已经声明级联层的名字后,它们的顺序随即被确立,你可以重复声明某级联层的名字来向其添加CSS规则。这些样式将被附加到该层的末尾,且级联层之间的顺序不会改变。

其他不属于任何一级联层的样式将被集中到同一匿名层,并置于所有层的前部,这意味着任何级联层内定义的规则都将覆盖外部声明的规则。

嵌套层

级联层允许嵌套,例如:

@layer framework {

  @layer layout {




  }

}

向 layout 层内部的 framework 层附加规则,只需用 . 连接这两层。

@layer framework.layout {

  p {

    margin-block: 1rem;

  }

}

匿名层

如果创建了一个级联层但并未指定名字,例如:

@layer {

  p {

    margin-block: 1rem;

  }

}

那么则称为创建了一个匿名层。除创建后无法向其添加规则外,该层和其他命名层功能一致。

标准语法

@layer [ <layer-name># | <layer-name>?  {

  <stylesheet>

} ]

@layer如何使用

创建级联层

级联层可以通过多种方式声明:

1、使用@layer 块规则,并立即为其分配样式:

@layer reset {

  * { /* Poor Man's Reset */

    margin: 0;

    padding: 0;

  }

}

2、使用规则@layer 语句,没有指定任何样式:

@layer reset;

3、将@import 与layer关键字或layer()函数一起使用

@import(reset.css) layer(reset);

以上每一个都创建了一个名为 的级联层reset。

管理级联层

级联层会按它们声明的顺序排序。

在下面的例子中,我们建立四个级联层:reset,base,theme,和utilities。

@layer reset { /* 创建级联层 “reset” */

  * {

    margin: 0;

    padding: 0;

  }

}




@layer base { /* 创建级联层 “base” */

  …

}




@layer theme { /* 创建级联层 “theme” */

  …

}




@layer utilities { /* 创建级联层 “utilities” */

  …

}

按照它们的声明顺序,层顺序变为:

reset
base
theme
utilities

重复使用级联层名称时,样式将附加到现有级联层。级联层的顺序保持不变,因为只有第一次的出现已经确定顺序:

@layer reset { /* 创建第一个级联层 “reset” */

  …

}




@layer base { /* 创建第二个级联层 “base” */

  …

}




@layer theme { /* 创建第三个级联层 “theme” */

  …

}




@layer utilities { /* 创建第四个级联层 “utilities” */

  …

}




@layer base { /* 会将样式添加至级联层“base” */

  …

}

重新使用级联层名称时层顺序保持不变的使@layer 语法变得更加方便和严谨。使用它,可以预先建立图层顺序,然后将所有 CSS 附加到它:

@layer reset;     /* 创建第一个级联层 “reset” */

@layer base;      /* 创建第二个级联层 “base” */

@layer theme;     /* 创建第三个级联层“theme” */

@layer utilities; /* 创建第四个级联层 “utilities” */




@layer reset { /* 添加样式至级联层 “reset” */

  …

}




@layer theme { /* 添加样式至级联层  “theme” */

  …

}




@layer base { /* 添加样式至级联层  “base” */

  …

}




@layer theme { /* 添加样式至级联层  “theme” */

  …

}

当然你可以用更短的语法来声明级联层,

@layer reset, base, theme, utilities;

从上面可以看出,多个级联层被声明时,最后一个级联层的声明会获胜。像这样,

@import(reset.css) layer(reset); /* 第一个级联层 */




@layer base { /* 第二个级联层 */

  form input {

    font-size: inherit; 

  }

}




@layer theme { /*第三个级联层 */

  input {

    font-size: 2rem;

  }

}

按以往CSS级联来进行分析的话,form input(多层级)的优先级会大于input,但是由于级联层所起的作用,@layer theme的input会取胜。

级联层嵌套

级联层支持嵌套使用,如下:

@layer base { /* 第一个级联层*/

  p { max-width: 70ch; }

}




@layer framework { /* 第二个级联层 */

  @layer base { /* 第二级联层的嵌套子级联层1 */

    p { margin-block: 0.75em; }

  }




  @layer theme { /* 第二级联层的嵌套子级联层2 */

    p { color: #222; }

  }

}

在这个例子中有两个级联外层:

base
framework

该framework层本身也包含两层:
base
theme

如果要将样式附加到嵌套级联层,需要使用以下全名来引用它,

@layer framework {

  @layer default {

     p { margin-block: 0.75em; }

  }




  @layer theme {

    p { color: #222; }

  }

}




@layer framework.theme {

  /* 这些样式会被添加到@layer framework层里面的theme层 */

  blockquote { color: rebeccapurple; }

}

@media与@layer

@media (min-width: 30em) {

  @layer layout {

    .title { font-size: x-large; }

  }

}




@media (prefers-color-scheme: dark) {

  @layer theme {

    .title { color: white; }

  }

}

如果第一个@media (min-width: 30em)匹配(基于视口尺寸),则layout级联层层将在图层顺序中排在第一位。如果只有@media (prefers-color-scheme: dark)匹配,theme则将是第一层。

如果两者匹配,则图层顺序将为layout, theme。如果没有匹配,则不定义层。



Tags:层叠样式表   点击:()  评论:()
声明:本站部分内容及图片来自互联网,转载是出于传递更多信息之目的,内容观点仅代表作者本人,不构成投资建议。投资者据此操作,风险自担。如有任何标注错误或版权侵犯请与我们联系,我们将及时更正、删除。
▌相关推荐
CSS新特性@layer(层叠样式表)
过往 css 优先级中存在的问题如果我们的页面上存在非常多的样式,譬如有我们开发页面的时候的自定义样式,也有引入的组件库样式。这时候样式将会非常混乱难以管理。当我们想覆...【详细内容】
2022-03-18  Search: 层叠样式表  点击:(410)  评论:(0)  加入收藏
▌简易百科推荐
12 个超级实用的 CSS 技巧
user-selectuser-select 属性可以用来控制用户是否能够选择文本。<div> <p>You can&#39;t select this text.</p></div><p>You can select this text.</p>CSS:div { width...【详细内容】
2023-12-19  前端充电宝  微信公众号  Tags:CSS   点击:(133)  评论:(0)  加入收藏
原生CSS嵌套使用,你学明白了吗?
如果你是一个前端开发人员,那么你应该使用过CSS预处理器以及预处理器中的嵌套特性。它一直是一个受欢迎的功能,我一直都在使用CSS预处理器。今年所有的主流浏览器都支持原生CS...【详细内容】
2023-12-06  南城大前端  微信公众号  Tags:CSS   点击:(185)  评论:(0)  加入收藏
CSS_Flex 那些鲜为人知的内幕
前言Flex想必大家都很熟悉,也是大家平时在进行页面布局的首选方案。(反正我是!)。不知道大家平时在遇到Flex布局属性问题时,是如何查阅并解决的。反正,我每次记不住哪些属性或...【详细内容】
2023-12-06  前端柒八九  微信公众号  Tags:CSS   点击:(140)  评论:(0)  加入收藏
CSS:这几个伪类,你用了吗
## :root 伪类:root 伪类是匹配文档的根元素,很多时候,根元素也就是 html 元素,用 root 伪类来匹配根元素,目的就是解决根元素不是 html 的场景,比如根元素是 svg 的时候。 root...【详细内容】
2023-11-30  读心悦  微信公众号  Tags:CSS   点击:(170)  评论:(0)  加入收藏
让你开发更舒适的 Tailwind 技巧
免费体验 Gpt4 plus 与 AI作图神器,我们出的钱 体验地址:体验使用 Tailwind CSS,我避免了在 React 项目中复制大量 CSS 文件的麻烦,使网页开发变得更加迅速高效。虽然 Tailwind...【详细内容】
2023-11-28  大迁世界  微信公众号  Tags:Tailwind   点击:(178)  评论:(0)  加入收藏
Display和Visibility的区别,你了解了吗?
采用CSS实现元素隐藏的方法有很多种,比如定位到屏幕之外、透明度变换等。而常见的两种方式是将元素设置为display:none或者visibility:hidden。元素样式设置为display:none当...【详细内容】
2023-11-27  读心悦  微信公众号  Tags:Display   点击:(174)  评论:(0)  加入收藏
新 CSS Math方法:Rem() 和 Mod()
CSS 添加了许多新的数学函数来补充旧有的函数(如 calc() 和最近的 clamp() )。这些函数最终都表示一个数值,但其工作原理的细微差别并不总是一开始就很清楚。本文介绍每个函数...【详细内容】
2023-11-23  大迁世界  微信公众号  Tags:CSS   点击:(255)  评论:(0)  加入收藏
CSS 新功能:让编码更高效
CSS 是一种不断发展的语言。每一次迭代,它都会变得越来越好。因此,了解最新的 CSS 功能非常重要,这样你才能在项目中使用它们,减少对第三方库的依赖。本文将介绍一些即将推出的...【详细内容】
2023-11-16  大迁世界  微信公众号  Tags:CSS   点击:(167)  评论:(0)  加入收藏
使用 CSS Grid 的响应式网页设计:消除媒体查询过载
前言你是否厌倦了在实现响应式网站时需要管理多个媒体查询?说再见复杂的代码,拥抱更简单的解决方案吧:CSS Grid。在这篇文章中,我们将踏上一场激动人心的 CSS Grid 之旅,发现它如...【详细内容】
2023-11-10  前端YUE  微信公众号  Tags:CSS   点击:(280)  评论:(0)  加入收藏
2024年了,别只使用React,需要学习一下Vue,不然没出路了
最近,我的朋友因为不熟悉 Vue.js 而未能通过面试。她平时工作中大部分时间都在使用React,所以也懒得去了解其他前端框架。世界上所有的前端框架我们都应该熟悉吗?不,这是极其不...【详细内容】
2023-11-08  web前端开发  微信公众号  Tags:Vue   点击:(299)  评论:(0)  加入收藏
相关文章
    无相关信息
站内最新
站内热门
站内头条