乐趣区

关于css:CSS-的未来Cascade-Layers-CSS-layer

jiezi

最近在 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, 公布咱们刮目相待。

当然当初如果想尝鲜，对于社区也有给出一些方法，

大家也能够试一试，感激浏览！

退出移动版