一文了解CSS3中的新特性@layer-css教學-PHP中文網

這篇文章帶大家一起深入了解CSS3中的新特性@layer，希望對大家有幫助！

一文了解CSS3中的新特性@layer

步入 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：

一文了解CSS3中的新特性@layer

當然，如果頁面內的@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：

一文了解CSS3中的新特性@layer

到這裡，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：

一文了解CSS3中的新特性@layer

如果，我们将匿名层放在最后的话：

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：

一文了解CSS3中的新特性@layer

嵌套层

说完了匿名层，我们再来看看嵌套层。

顾名思义，嵌套层的意思就是在 @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
https://codepen.io/Chokcoco/pen/KKZKBRr

非 @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）。
https://github.com/chokcoco/iCSS/issues/76

而当有了 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!)


最後
好了，本文到此結束，希望對你有幫助:)
（學習影片分享：web前端）