共计 6207 个字符,预计需要花费 16 分钟才能阅读完成。
步入 2022,CSS 的新个性层出不穷,而最近在 CSS 圈最受注目的新个性,非 CSS @layer 莫属。
本文,将用最简洁的语言,疾速让读者们搞懂,到底什么是 CSS @layer 新标准。
过往 CSS 优先级中存在的问题
如果咱们的页面上存在十分多的款式,譬如有咱们开发页面的时候的自定义款式,也有引入的组件库款式。这时候款式将会十分凌乱难以治理。
当咱们想笼罩一些自身非咱们书写的款式时候,往往不得不通过应用优先级权重更高的款式名,去笼罩那些款式。
同时,当款式优先级感到难以管制时,开发者习惯滥用 !important
去解决,这又循环导致了后续更凌乱的款式构造。
基于让 CSS 失去更好的管制和治理的背景,CSS @layer 应运而生。
何为 CSS @layer?
CSS @layer 从 CSS Cascading and Inheritance Level 5 被标准定义。
何为 CSS @layer?简略而言,CSS @规定 中的 @layer 申明了一个 级联层,同一层内的规定将级联在一起,这给予了开发者对层叠机制的更多管制。
语法也非常简单,看这样一个例子:
@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 级联层的形式。
- 间接创立一个块级的 @layer 规定,其中蕴含作用于该层外部的 CSS 规定:
@layer utilities {
p {padding: .5rem;}
}
- 一个级联层能够通过 @import 来创立,规定存在于被引入的样式表内:
@import(utilities.css) layer(utilities);
- 创立带命名的级联层,但不指定任何款式。款式随后可在 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></div>
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
规定之上的。
上述 DEMO 还是比拟有意思的,感兴趣的能够看看:CodePen Demo — CSS Cascade @layer Demo
非 @layer 蕴含块 !important 与 @layer 蕴含块 !important
到这里,你兴许会认为你懂了。好,咱们再来看一个 DEMO,如果咱们给非 @layer 蕴含块,也加上一个 !important
规定,事件就变得乏味了。
<div></div>
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 Cascading,也就是层叠标准,你能够看看我的这篇文章加深了解 — 深刻了解 CSS(Cascading Style Sheets)中的层叠(Cascading)。
而当有了 CSS @layer 之后,这个层叠优先级程序有了更新,具体优先级如下:
整体会变更为简单一些,然而总体还是遵循了两个规定:
!important
款式高于非!important
款式- 在比拟
!important
规定时,优先级程序与失常规定相同,在失常状态下优先级越低的,在!important
下优先级越高
总结一下
综上,便是对于 CSS @layer 的根底相干常识。
CSS @layer 的诞生,让咱们有能力更好的划分页面的款式层级,更好的解决外部款式与内部援用款式的优先级程序,属于比拟重大的一次变革。
同时,它也让咱们意识到要逐步摒弃大规模应用 !important
去笼罩款式优先级的错误做法,防止许多因为优先级问题带来的不必要的副作用。
当然,时至明天(2022-03-14),咱们来看一眼兼容性:
尽管红了一大片,然而,在最新版的 Chrome、Safari、Firefox、Edge 都曾经开始反对 CSS @layer,并且,目前曾经能够通过一些 polyfill 初步应用它,置信在不久的未来,它将会成为业务 CSS 代码中必不可少的一部分。
延长浏览
外网对 CSS @layer 曾经有十分多的探讨,这里列举一些优质文章,感兴趣的能够持续浏览:
- Cascade Layers Explainer
- Getting Started With CSS Cascade Layers
- 文章内局部截图援用于 How does !important actually work? (It’s not what you think!)
最初
好了,本文到此结束,心愿对你有帮忙 :)
想 Get 到最有意思的 CSS 资讯,千万不要错过我的公众号 — iCSS 前端趣闻 😄
更多精彩 CSS 技术文章汇总在我的 Github — iCSS,继续更新,欢送点个 star 订阅珍藏。
如果还有什么疑难或者倡议,能够多多交换,原创文章,文笔无限,满腹经纶,文中若有不正之处,万望告知。