共计 4639 个字符,预计需要花费 12 分钟才能阅读完成。
最近在 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 属性个别来自于哪几个源?
1、用户代理样式表:浏览器的根本的样式表,用于给所有网页设置默认款式。
2、用户样式表:网页的作者能够定义文档的款式。大多数状况下此类型样式表会定义网站的主题。
3、浏览器的用户应用自定义样式表定制应用体验。
层叠(级联)算法如何过滤来自不同源的 css 规定?
互相抵触的申明按以下程序实用,后一种申明将笼罩前一种申明:
1、用户代理样式表中的申明(浏览器的默认款式)。
2、用户样式表中的惯例申明(用户设置的自定义款式,就如同咱们的reset.css
)。
3、作者样式表中的惯例申明(开发人员设置的款式)。
4、作者样式表中的!important 申明
5、用户样式表中的!important 申明
过滤来自不同源的 css 规定后,确定同源优先级高下,决定谁“优胜”
!important > 内联 style > #id > .class > 标签
理解级联算法有助于帮忙咱们了解浏览器是如何解决款式规定抵触,也就是浏览器决定哪个款式规定使用到元素上,更多相干 css 级联
的理解:
何为继承?
当元素的一个继承属性没有指定值时,则取父元素的同属性的计算值。只有文档根元素取该属性定义的默认值,相似的属性有 color
、font-size
等。
CSS 是由 Cascading Style Sheets
三个词的首字母缩写,很多人将其称为 层叠样式表或者级联样式表
.
@layer
CSS Cascade Layers
,也叫做 CSS 级联层
,是Cascading and Inheritance Level5
标准中新增了一个新的 CSS 个性,对应的 CSS 属性写法@layer
, 即 一个新的 @ 规定,也就是大家所说的 at-rule
规定。
为啥会呈现 @layer?
通过下面咱们对 级联
介绍,咱们曾经看到了程序对于层叠的重要性,同权重的 css 属性后者会“优胜”前者,权重不同会依据 CSS 申明起源和优先级算法来判断谁“优胜”。!important
的 CSS 规定主动将它跳到层叠算法的后面,可能笼罩一般规定的层叠。
也就是说咱们个别会应用选择器权重和程序作为管制级联的办法,然而这样却会时常碰到:
应用较高权重的选择器来避免你的代码被前面的代码(或他人的代码)笼罩。但这也会引起另一个不良的景象,可能会在代码中新增很多带有 !important 的款式规定,这自身就会引起更多的问题,比方 !important
在 CSS 样式表中随处可见,须要笼罩的时候难以被笼罩。
应用较低权重的选择器又很容易被前面的代码(或他人的代码)笼罩。比方你在引入第三方代码库或组件时,本人的代码可能被笼罩。
这两个景象也是编写 CSS 代码,特地是在一个大型项目或多人合作的我的项目中常呈现。也给很多 CSS 开发者带来很多困扰。
尽管社区有很多第三方计划,如 CSS-in-JS
、CSS Modules
和 CSS Scoped
等来帮助解决级联所带来的问题,但因为源码程序(打包产物)依然起着决定性的作用,程序带来的笼罩和抵触仍旧未真正的解决,而且选择器权重依然比层的程序(源码程序)更重要。
这样的背景促成了 @layer
的呈现,要真正的解决级联带来的这些问题。
@layer
的呈现,也要求咱们对以往 css 级联
有个新的理解,
能够看出 CSS 的级联层
个别位于“Style 属性”(Style Attribute)和 CSS 选择器权重(Specificity)之间。
应用CSS 级联层
,能够通过@layer
at-rule 将 CSS 分成多个层。
与 CSS 属性起源 在用户样式表和作者样式表格调之间提供衡量的形式雷同,Cascade Layers 提供了一种结构化的形式来组织和衡量单个 起源 内的关注点
如何应用
创立级联层
级联层能够通过多种形式申明:
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。如果没有匹配,则不定义层。
结语
随着 Cascade Layers
的呈现,咱们的开发人员将领有更多的工具来管制 Cascade
。Cascade Layers
的真正力量来自它在 Cascade 中的独特地位:Style 属性(Style Attribute)
和 CSS 选择器权重(Specificity)
之间。因而,咱们不须要放心其余层中应用的 CSS 的选择器特异性,也不须要放心咱们将 CSS 加载到这些层中的程序.
理解到这里,是不是感觉 @layer
相当地 cool,急不可待地想去应用了,咱们看一下 caniuse
@layer
的兼容状况,
很遗憾,反对水平惨不忍睹,想真正应用可能还要再等等,对于明年三月份 Chromium 99
, 公布咱们刮目相待。
当然当初如果想尝鲜,对于社区也有给出一些方法,
大家也能够试一试,感激浏览!