2022 CSS新特性 @layer 介绍
最近在Weekly
邮件推送中查阅到这样的一条信息:
Chromium 团队宣布他们将随 Chromium 99(预计在明年 3 月发布)一起发布CSS Cascade Layers
会发现这条信息里面出现了一个CSS的新名词CSS Cascade Layers
,出于好奇以及对新知识的渴望(说得我自己都信了,哈哈),于是查阅起CSS Cascade Layers
的相关资料,试图搞懂它。
前置知识
at-rule规则
at-rule
规则, CSS Conditional Rules Module Level 3
新增的规则,是一条语句,它为CSS提供了执行或如何执行的指令,常见的at-rule
规则有:
@import
,允许用户从其他样式表导入样式规则@font-face
,允许我们引用自定义的字体@keyframes
,声明一个动画@media
,是条件CSS中的一种,其条件是一个媒体查询@supports
,测试用户代理是否支持CSS属性/值对@viewport
,用来控制移动设备上的viewport设置
Cascading and Inheritance Level
级联(层叠)与继承
经过多年的发展迭代,目前已有多个版本(CSS2.2、Level3、Level4 和 Level5
)。
何为级联(层叠)?
层叠本质就是定义了如何合并来自多个源的属性值的算法,简单来说,CSS规则的顺序很重要。当两条同级别的规则应用到一个元素的时候,写在后面的就是实际使用的规则。
h1 { color: red; } h1 { color: blue; }
两条规则优先级相同,所以顺序在最后的生效,h1
是color:blue
‘胜出’,显示蓝色。
只有CSS声明,就是属性名值对,会参与层叠计算。这表示包含CSS声明以外实体的@规则不参与层叠计算,如包含描述符的@font-face
,@规则(at-rule规则
)是做为一个整体参与层叠计算。
css属性一般来自于哪几个源?
- 用户代理样式表:浏览器的基本的样式表,用于给所有网页设置默认样式。
- 用户样式表:网页的作者可以定义文档的样式。大多数情况下此类型样式表会定义网站的主题。
- 浏览器的用户使用自定义样式表定制使用体验。
层叠(级联)算法如何过滤来自不同源的css规则?
相互冲突的声明按以下顺序适用,后一种声明将覆盖前一种声明:
- 用户代理样式表中的声明(浏览器的默认样式);
- 用户样式表中的常规声明(用户设置的自定义样式,就如同我们的
reset.css
); - 作者样式表中的常规声明(开发人员设置的样式);
- 作者样式表中的
!important
声明; - 用户样式表中的
!important
声明。
过滤来自不同源的css规则后,确定同源优先级高低,决定谁“优胜”
!important > 内联style > #id > .class > 标签
了解级联算法有助于帮助我们理解浏览器是如何解决样式规则冲突,也就是浏览器决定哪个样式规则运用到元素上。
何为继承?
当元素的一个继承属性没有指定值时,则取父元素的同属性的计算值 。只有文档根元素取该属性定义的默认值,类似的属性有color
、font-size
等 。
CSS是由Cascading Style Sheets
三个词的首字母缩写,很多人将其称为层叠样式表或者级联样式表
。
过往 CSS 优先级中存在的问题
如果我们的页面上存在非常多的样式,譬如有我们开发页面的时候的自定义样式,也有引入的组件库样式。这时候样式将会非常混乱难以管理。
当我们想覆盖一些本身非我们书写的样式时候,往往不得不通过使用优先级权重更高的样式名,去覆盖那些样式。
同时,当样式优先级感到难以控制时,开发者习惯滥用 !important
去解决,这又循环导致了后续更混乱的样式结构。
基于让 CSS 得到更好的控制和管理的背景,CSS @layer
应运而生。
@layer
CSS Cascade Layers
,也叫做CSS级联层
,是Cascading and Inheritance Level5 规范中新增了一个新的 CSS 特性,对应的CSS属性写法@layer
,即一个新的 @ 规则,也就是大家所说的at-rule
规则。
语法也非常简单,看这样一个例子:
@layer utilities { /* 创建一个名为 utilities 的级联层 */ }
这样,我们就创建一个名为 utilities 的 @layer
级联层。
@layer
级联层如何使用呢?
通过 @layer 级联层管理样式优先级
@layer 级联层最大的功能,就是用于控制不同样式之间的优先级。
看下面这样一个例子,我们定义了两个 @layer
级联层 A 和 B:
<div></div>
div { width: 200px; height: 200px; } @layer A { div { background: blue; } } @layer B { div { background: green; } }
由于 @layer B
的顺序排在 @layer A
之后,所以 @layer B
内的所有样式优先级都会比 @layer A
高,最终 div 的颜色为 green
:
当然,如果页面内的 @layer
太多,可能不太好记住所有 @layer
的顺序,因此,还有这样一种写法。
我们可以同时命名多个 @layer
层,其后再补充其中的样式规则。
<div></div>
@layer B, C, A; div { width: 200px; height: 200px; } @layer A { div { background: blue; } } @layer B { div { background: green; } } @layer C { div { background: orange; } }
上述代码,我们首先定义了 @layer B, C, A
三个 @layer 级联层。而后再后面的 CSS 代码中补充了每个级联层的 CSS 代码,但是样式的优先级为:
A > C > B
因此,最终的 div 的颜色值为 @layer
A 中定义的颜色,为 blue
:
到这里,CSS @layer 的作用可以清晰的被窥见。
利用 CSS @layer,我们可以将 CSS 不同模块划入不同的 @layer 中,利用先后顺序,非常好的去控制全局的样式优先级。
@layer 级联层的三种定义引入方式
上面其实提到了两种 @layer
级联层的定义引入方式,这里再描述下,一共有 3 中引入 CSS @layer
级联层的方式。
1、直接创建一个块级的 @layer
规则,其中包含作用于该层内部的CSS规则:
@layer utilities { p { padding: .5rem; } }
2、一个级联层可以通过 @import 来创建,规则存在于被引入的样式表内:
@import(utilities.css) layer(utilities);
3、创建带命名的级联层,但不指定任何样式。样式随后可在 CSS 内任意位置添加:
@layer utilities; // ... // ... @layer utilities { p { color: red; } }
非 @layer 包裹层与 @layer 层内样式优先级
当然,这里还会有一种情况,没有被 @layer 包裹的样式,它的优先级和被 @layer 包裹的样式相比,又会如何呢?
看这样一个例子:
@layer A { a { color: red; } } @layer B { a { color: orange; } } @layer C { a { color: yellow; } } a { color: green; } /* 未被 @layer 包裹的样式 */
这里会有一个非常重要的结论,非 @layer 包裹的样式,拥有比 @layer 包裹样式更高的优先级,因此,上述规则的排序是:
未被 @layer 包裹的样式 > @layer C > @layer B > @layer A
匿名层与嵌套层
还有两种层级关系,分别是匿名层和嵌套层。
匿名层
允许创建一个不带名字的 @layer
:
@layer { p { margin: 1rem; } }
这里,创建了一个匿名层。匿名层的两个重要特性:
- 创建后无法向其再添加规则
- 该层和其他命名层功能一致,优先级也遵循后定义的匿名层,比其他已定义的
@layer
层,优先级更高
看一个例子:
<div></div>
div { width: 200px; height: 200px; } @layer { div { background: pink; } } @layer B, C, A; @layer A { div { background: blue; } } @layer B { div { background: green; } } @layer C { div { background: orange; } }
上述代码,我们首先定义了一个匿名层,指定了 div 的颜色为 pink
,而后又定义了 @layer B, C, A
。这里优先级顺序为:
A > C > B > 匿名层
最终的颜色为 @layer A 内的颜色值 — blue
:
如果,我们将匿名层放在最后的话:
div { width: 200px; height: 200px; } @layer B, C, A; @layer A { div { background: blue; } } @layer B { div { background: green; } } @layer C { div { background: orange; } } @layer { div { background: pink; } }
此时,样式的优先级顺序为:
匿名层 > A > C > B
最终的颜色为匿名层内的颜色值 — pink
:
嵌套层
说完了匿名层,我们再来看看嵌套层。
顾名思义,嵌套层的意思就是在 @layer
内部,我们可以再嵌套使用 @layer
级联层。像是这样:
@layer A { @layer B{ ... } }
当然,它还有另外一种语法,上述代码等价于:
@layer A.B { ... }
了解了这个后,那么,看这样一个例子:
<div></div>
div { width: 200px; height: 200px; } @layer A { div { background: blue; } @layer B { div { background: red; } } }
我们在 @layer A 中嵌套一个 @layer B,同时都定义了一个 div 的样式,最终 div 的 background
到底是什么颜色呢?
最终为蓝色 background: blue
,为什么呢?这个很好记忆,我们假设如果没有 @layer A 这一层包裹,其实就是上述说的 @layer
层与非 @layer
层的优先级比较,这里,非 @layer
层(我们可以理解为更高级别的一层 @layer)的优先级更高。
因此,对于单个 @layer
内的嵌套关系,样式优先级为:
@layer A > @layer A.B
多层嵌套层的优先级关系
OK,再看这样一种情况:
div { width: 200px; height: 200px; } @layer A { div { background: blue; } @layer B { div { background: red; } } } @layer C { div { background: yellow; } @layer D { div { background: green; } } }
这里存在同时存在多个嵌套 @layer 的情况。那么这种情况优先级又是如何划分呢?
这里的规则是,优先级高的 @layer,无论是否存在嵌套,优先级都整体比优先级低的 @layer(无论是否存在嵌套)高,因此,这里的优先级排序是:
@layer C > @layer C.D > @layer A > @layer A.B
!important 对 CSS @layer 的影响
再来看看 !important
对 CSS @layer
的影响。
这里可以分为几种情况,先看其中一种:
div { width: 200px; height: 200px; background: black; } @layer A { div { background: blue; } @layer B { div { background: red; } } } @layer C { div { background: yellow; } @layer D { div { background: green!important; } } }
上述代码,我们给 @layer C.D 的 <div>
添加了一个 !important
规则。
如果,不考虑 !important
规则,那么实际的 CSS 优先级为(序号越高,优先级越高):
- @layer A.B
- @layer A
- @layer C.D
- @layer C
- 非 layer 包裹块
那么,<div>
的颜色应该为黑色 black
。然而,这里给 @layer C.D 的 <div>
添加了一个 !important
规则。
实际上,最终 <div>
的颜色为 green
,也就是最终的优先级排序为(序号越高,优先级越高):
- @layer A.B
- @layer A
- @layer C
- 非 layer 包裹块
- !important 下的 @layer C.D
也就是说,这里 !important
规则的优先级还是凌驾于非 !important
规则之上的。
非 @layer 包含块 !important 与 @layer 包含块 !important
到这里,你也许会以为你懂了。好,我们再来看一个 DEMO,如果我们给非 @layer
包含块,也加上一个 !important
规则,事情就变得有趣了。
div { width: 200px; height: 200px; background: black!important; } @layer A { div { background: blue; } @layer B { div { background: red; } } } @layer C { div { background: yellow; } @layer D { div { background: green!important; } } }
仔细看上述代码,非 @layer 包含块,我们也加上了一个 !important
规则,按照上述我能描述的规则来看,非 @layer 包含块的优先级高于 @layer 包含块,那么正常而言,我们不难猜测,这里 background: black!important
的优先级应该要比 background: green!important
高,最终 <div>
应该展示黑色。
而实际上,这里最终 <div>
的颜色还是 green
。这里就又有一个非常有意思的知识点了,!important 下样式优先级的规则与非 !important 正常状态下刚好相反。
这是一个非常重要的特性,在比较正常(非 !important
)规则时,越是级联(排序较后的 @layer 规则),优先级越低;反之,在比较 !important
规则时,越是级联靠后的(排序较后的 @layer 规则),优先级越高。
这个,更进一步的话,我们需要去了解 CSS Cascading 相关的知识了。
CSS Cascade 规范
在 CSS @layer 之前,我们简单看一张图:
上图表面的是在没有 CSS @layer 之前,CSS 样式申明的优先级排序,根据 CSS Cascading 4(Current Work) 标准,定义的当前规范下申明的层叠顺序优先级如下(越往下的优先级越高,下面的规则按升序排列):
- Normal user agent declarations
- Normal user declarations
- Normal author declarations
- Animation declarations
- Important author declarations
- Important user declarations
- Important user agent declarations
- Transition declarations
按照上述算法,可以得到一个样式优先级的排序,大概是这样(越往下的优先级越高,下面的规则按升序排列):
- User Agent – 用户代理普通样式
- User – 用户设置的普通样式
- Author – 页面作者普通样式
- Animations – 动画样式
- ❗️Author – 页面作者 !important 样式
- ❗️User – 用户设置的 !important 样式
- ❗️User Agent – 用户代理的 !important 样式
- Transitions – 过渡样式
简单解释一下:
用户代理样式:浏览器会有一个基本的样式表来给任何网页设置默认样式。这些样式统称用户代理样式。页面作者样式:网页的作者可以定义文档的样式,这是最常见的样式表。大多数情况下此类型样式表会定义多个,它们构成网站的视觉和体验,即页面主题,可以理解为页面作者样式。
用户样式:读者,作为浏览器的用户,可以使用自定义样式表定制使用体验,自定义用户偏好,可以理解为用户样式。
而当有了 CSS @layer 之后,这个层叠优先级顺序有了更新,具体优先级如下:
整体会变更为复杂一些,但是总体还是遵循了两个规则:
!important
样式高于非!important
样式- 在比较
!important
规则时,优先级顺序与正常规则相反,在正常状态下优先级越低的,在!important
下优先级越高
总结一下
综上,便是关于 CSS @layer 的基础相关知识。
CSS @layer 的诞生,让我们有能力更好的划分页面的样式层级,更好的处理内部样式与外部引用样式的优先级顺序,属于比较重大的一次革新。
同时,它也让我们意识到要逐渐摒弃大规模使用 !important
去覆盖样式优先级的错误做法,避免许多因为优先级问题带来的不必要的副作用。
当然,时至今天(2022-03-23),我们来看一眼兼容性:
虽然红了一大片,但是,在最新版的 Chrome、Safari、Firefox、Edge 都已经开始支持 CSS @layer
,并且,目前已经可以通过一些 polyfill 初步使用它,相信在不久的将来,它将会成为业务 CSS 代码中必不可少的一部分。
1. 本站所有素材(未指定商用),仅限学习交流。
2. 会员在本站下载的VIP素材后,只拥有使用权,著作权归原作者及码云笔记网所有。
3. 原创商用和VIP素材,未经合法授权,请勿用于商业用途,会员不得以任何形式发布、传播、复制、转售该素材,否则一律封号处理。
4. 本平台织梦模板仅展示和个人非盈利用途,织梦系统商业用途请预先授权。
码云笔记 » 2022 CSS新特性 @layer 介绍