Ketahui tentang ciri baharu dalam CSS3 @layer dalam satu artikel

Artikel ini akan memberi anda pemahaman yang mendalam tentang ciri baharu @layer dalam CSS3 saya harap ia akan membantu anda!

Memasuki 2022, ciri baharu CSS muncul satu demi satu, dan ciri baharu yang paling menarik perhatian dalam kalangan CSS baru-baru ini ialah CSS @layer.

Artikel ini akan menggunakan bahasa yang paling ringkas untuk membolehkan pembaca memahami dengan pantas tentang spesifikasi CSS @layer baharu.

Masalah yang wujud dalam keutamaan CSS pada masa lalu

Jika terdapat banyak gaya pada halaman kami, seperti gaya tersuai semasa kami membangunkan halaman, terdapat juga Gaya perpustakaan komponen yang diperkenalkan. Pada masa ini gaya akan menjadi sangat mengelirukan dan sukar untuk diurus.

Apabila kami ingin mengatasi beberapa gaya yang tidak ditulis oleh kami, kami selalunya perlu mengatasi gaya tersebut dengan menggunakan nama gaya dengan keutamaan dan berat yang lebih tinggi.

Pada masa yang sama, apabila keutamaan gaya terasa sukar dikawal, pembangun terbiasa menyalahgunakan !important untuk menyelesaikannya, yang seterusnya membawa kepada struktur gaya yang lebih mengelirukan pada masa hadapan.

Berdasarkan latar belakang membenarkan CSS dikawal dan diurus dengan lebih baik, CSS @layer wujud.

Apakah itu CSS @layer?

CSS @layer ditakrifkan daripada Lata CSS dan Tahap Warisan 5.

Apakah itu CSS @layer? Ringkasnya, @layer dalam CSS @Rule mengisytiharkan lapisan bertingkat dalam lapisan yang sama akan disatukan. Ini memberikan kawalan yang lebih kepada pembangun.

Sintaks juga sangat mudah, lihat contoh ini:

@layer utilities {
  /* 创建一个名为 utilities 的级联层 */
}

Dengan cara ini, kami mencipta lapisan lata @layer bernama utiliti.

@lapisan Bagaimana untuk menggunakan lapisan berlatarkan?

Urus keutamaan gaya melalui lapisan lata @layer

Fungsi terbesar lapisan lata @layer ialah mengawal keutamaan antara gaya berbeza.

Lihat contoh berikut, kami mentakrifkan dua lapisan lata @lapisan A dan B:

<div></div>

div {
    width: 200px;
    height: 200px;
}
@layer A {
    div {
        background: blue;
    }
}
@layer B {
    div {
        background: green;
    }
}

Memandangkan @layer B ditempah selepas @layer A , jadi keutamaan semua gaya dalam @layer B akan lebih tinggi daripada @layer A dan warna akhir div ialah green:

Sudah tentu, jika @lapisan dalam halaman Jika terlalu banyak, mungkin tidak mudah untuk mengingati susunan semua @layers, jadi ada cara lain untuk menulisnya.

Kita boleh menamakan berbilang lapisan @lapisan pada masa yang sama, dan kemudian menambah peraturan gaya.

<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;
    }
}

Dalam kod di atas, kami mula-mula mentakrifkan @layer B, C, A tiga lapisan lata @layer. Kemudian kod CSS untuk setiap lapisan cascading ditambahkan pada kod CSS berikutnya, tetapi keutamaan gaya ialah:

A > C > >B

: blue

Menggunakan CSS @layer, kami boleh membahagikan modul CSS yang berbeza kepada @layers yang berbeza dan menggunakan tertib untuk mengawal keutamaan gaya global .

@layer utilities {
  p {
    padding: .5rem;
  }
}

@ import untuk mencipta, peraturan wujud dalam helaian gaya yang diimport:

@import(utilities.css) layer(utilities);

@layer utilities;
// ...
// ...
@layer utilities {
    p {
        color: red;
    }
}

Lapisan pembalut bukan@lapisan dan keutamaan gaya @lapisan

@layer A { a { color: red; } }
@layer B { a { color: orange; } }
@layer C { a { color: yellow; } }
a { color: green; } /* 未被 @layer 包裹的样式 */

Gaya yang tidak berbalut lapisan mempunyai keutamaan yang lebih tinggi daripada gaya berbalut lapisan , oleh itu, susunan peraturan di atas ialah:

匿名层与嵌套层

还有两种层级关系，分别是匿名层和嵌套层。

匿名层

允许创建一个不带名字的 @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

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 规则），优先级越高。