建站
咨詢
售后
建站咨詢
新聞中心
這里有您想知道的互聯(lián)網(wǎng)營銷解決方案
2022年受矚目的新特性CSS@layer到底是個(gè)啥？
步入 2022，CSS 的新特性層出不窮，而最近在 CSS 圈最受矚目的新特性，非 CSS @layer 莫屬。
創(chuàng)新互聯(lián)建站是專業(yè)的同心網(wǎng)站建設(shè)公司，同心接單;提供網(wǎng)站設(shè)計(jì)、成都做網(wǎng)站,網(wǎng)頁設(shè)計(jì),網(wǎng)站設(shè)計(jì),建網(wǎng)站,PHP網(wǎng)站建設(shè)等專業(yè)做網(wǎng)站服務(wù);采用PHP框架,可快速的進(jìn)行同心網(wǎng)站開發(fā)網(wǎng)頁制作和功能擴(kuò)展;專業(yè)做搜索引擎喜愛的網(wǎng)站,專業(yè)的做網(wǎng)站團(tuán)隊(duì),希望更多企業(yè)前來合作!
本文，將用最簡(jiǎn)潔的語言，快速讓讀者們搞懂，到底什么是 CSS @layer 新規(guī)范。
過往 CSS 優(yōu)先級(jí)中存在的問題
如果我們的頁面上存在非常多的樣式，譬如有我們開發(fā)頁面的時(shí)候的自定義樣式，也有引入的組件庫樣式。這時(shí)候樣式將會(huì)非?；靵y難以管理。
當(dāng)我們想覆蓋一些本身非我們書寫的樣式時(shí)候，往往不得不通過使用優(yōu)先級(jí)權(quán)重更高的樣式名，去覆蓋那些樣式。
同時(shí)，當(dāng)樣式優(yōu)先級(jí)感到難以控制時(shí)，開發(fā)者習(xí)慣濫用 !important 去解決，這又循環(huán)導(dǎo)致了后續(xù)更混亂的樣式結(jié)構(gòu)。
基于讓 CSS 得到更好的控制和管理的背景，CSS @layer 應(yīng)運(yùn)而生。
何為 CSS @layer?
CSS @layer 從 CSS Cascading and Inheritance Level 5[1] 被規(guī)范定義。
何為 CSS @layer?簡(jiǎn)單而言，CSS[2] @規(guī)則[3] 中的@layer聲明了一個(gè) 級(jí)聯(lián)層， 同一層內(nèi)的規(guī)則將級(jí)聯(lián)在一起， 這給予了開發(fā)者對(duì)層疊機(jī)制的更多控制。
語法也非常簡(jiǎn)單，看這樣一個(gè)例子：
@layer utilities {
/* 創(chuàng)建一個(gè)名為 utilities 的級(jí)聯(lián)層 */
}這樣，我們就創(chuàng)建一個(gè)名為 utilities 的 @layer 級(jí)聯(lián)層。
@layer 級(jí)聯(lián)層如何使用呢?
通過 @layer 級(jí)聯(lián)層管理樣式優(yōu)先級(jí)
@layer 級(jí)聯(lián)層最大的功能，就是用于控制不同樣式之間的優(yōu)先級(jí)。
看下面這樣一個(gè)例子，我們定義了兩個(gè) @layer 級(jí)聯(lián)層 A 和 B：
div {
width: 200px;
height: 200px;
}
@layer A {
div {
background: blue;
}
}
@layer B {
div {
background: green;
}
}由于 @layer B 的順序排在 @layer A 之后，所以 @layer B 內(nèi)的所有樣式優(yōu)先級(jí)都會(huì)比 @layer A 高，最終 div 的顏色為 green：
當(dāng)然，如果頁面內(nèi)的 @layer 太多，可能不太好記住所有 @layer 的順序，因此，還有這樣一種寫法。
我們可以同時(shí)命名多個(gè) @layer 層，其后再補(bǔ)充其中的樣式規(guī)則。
@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 三個(gè) @layer 級(jí)聯(lián)層。而后再后面的 CSS 代碼中補(bǔ)充了每個(gè)級(jí)聯(lián)層的 CSS 代碼，但是樣式的優(yōu)先級(jí)為：
A > C > B。
因此，最終的 div 的顏色值為 @layer A 中定義的顏色，為 blue：
到這里，CSS @layer 的作用可以清晰的被窺見。
利用 CSS @layer，我們可以將 CSS 不同模塊劃入不同的 @layer 中，利用先后順序，非常好的去控制全局的樣式優(yōu)先級(jí)。
@layer 級(jí)聯(lián)層的三種定義引入方式
上面其實(shí)提到了兩種 @layer 級(jí)聯(lián)層的定義引入方式，這里再描述下，一共有 3 中引入 CSS @layer 級(jí)聯(lián)層的方式。
直接創(chuàng)建一個(gè)塊級(jí)的 @layer 規(guī)則，其中包含作用于該層內(nèi)部的CSS規(guī)則：
@layer utilities {
p {
padding: .5rem;
}
}一個(gè)級(jí)聯(lián)層可以通過 @import[4] 來創(chuàng)建，規(guī)則存在于被引入的樣式表內(nèi)：
@import(utilities.css) layer(utilities);
創(chuàng)建帶命名的級(jí)聯(lián)層，但不指定任何樣式。樣式隨后可在 CSS 內(nèi)任意位置添加：
@layer utilities;
// ...
// ...
@layer utilities {
p {
color: red;
}
}
非 @layer 包裹層與 @layer 層內(nèi)樣式優(yōu)先級(jí)
當(dāng)然，這里還會(huì)有一種情況，沒有被 @layer 包裹的樣式，它的優(yōu)先級(jí)和被 @layer 包裹的樣式相比，又會(huì)如何呢?
看這樣一個(gè)例子：
@layer A { a { color: red; } }
@layer B { a { color: orange; } }
@layer C { a { color: yellow; } }
a { color: green; } /* 未被 @layer 包裹的樣式 */ 這里會(huì)有一個(gè)非常重要的結(jié)論，非 @layer 包裹的樣式，擁有比 @layer 包裹樣式更高的優(yōu)先級(jí)，因此，上述規(guī)則的排序是：
未被 @layer 包裹的樣式 > @layer C > @layer B > @layer A。
匿名層與嵌套層
還有兩種層級(jí)關(guān)系，分別是匿名層和嵌套層。
匿名層
允許創(chuàng)建一個(gè)不帶名字的 @layer：
@layer {
p {
margin: 1rem;
}
}這里，創(chuàng)建了一個(gè)匿名層。匿名層的兩個(gè)重要特性：
- 創(chuàng)建后無法向其再添加規(guī)則。
- 該層和其他命名層功能一致，優(yōu)先級(jí)也遵循后定義的匿名層，比其他已定義的 @layer 層，優(yōu)先級(jí)更高。
看一個(gè)例子：
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;
}
}上述代碼，我們首先定義了一個(gè)匿名層，指定了 div 的顏色為 pink，而后又定義了 @layer B, C, A。這里優(yōu)先級(jí)順序?yàn)椋?/p>
A > C > B > 匿名層。
最終的顏色為 @layer A 內(nèi)的顏色值 -- 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;
}
}此時(shí)，樣式的優(yōu)先級(jí)順序?yàn)椋?/p>
匿名層 > A > C > B。
最終的顏色為匿名層內(nèi)的顏色值 -- pink：
嵌套層
說完了匿名層，我們?cè)賮砜纯辞短讓印?/p>
顧名思義，嵌套層的意思就是在 @layer 內(nèi)部，我們可以再嵌套使用 @layer 級(jí)聯(lián)層。像是這樣：
@layer A {
@layer B{
...
}
}當(dāng)然，它還有另外一種語法，上述代碼等價(jià)于：
@layer A.B {
...
}了解了這個(gè)后，那么，看這樣一個(gè)例子：
div {
width: 200px;
height: 200px;
}
@layer A {
div {
background: blue;
}
@layer B {
div {
background: red;
}
}
}我們?cè)?@layer A 中嵌套一個(gè) @layer B，同時(shí)都定義了一個(gè) div 的樣式，最終 div 的 background 到底是什么顏色呢?
最終為藍(lán)色 background: blue，為什么呢?這個(gè)很好記憶，我們假設(shè)如果沒有 @layer A 這一層包裹，其實(shí)就是上述說的 @layer 層與非 @layer 層的優(yōu)先級(jí)比較，這里，非 @layer 層(我們可以理解為更高級(jí)別的一層 @layer)的優(yōu)先級(jí)更高。
因此，對(duì)于單個(gè) @layer 內(nèi)的嵌套關(guān)系，樣式優(yōu)先級(jí)為：
@layer A > @layer A.B。
多層嵌套層的優(yōu)先級(jí)關(guān)系
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;
}
}
}這里存在同時(shí)存在多個(gè)嵌套 @layer 的情況。那么這種情況優(yōu)先級(jí)又是如何劃分呢?
這里的規(guī)則是，優(yōu)先級(jí)高的 @layer，無論是否存在嵌套，優(yōu)先級(jí)都整體比優(yōu)先級(jí)低的 @layer(無論是否存在嵌套)高，因此，這里的優(yōu)先級(jí)排序是：
@layer C > @layer C.D > @layer A > @layerA.B。
!important 對(duì) CSS @layer 的影響
再來看看 !important 對(duì) CSS @layer 的影響。
這里可以分為幾種情況，先看其中一種：
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 的
添加了一個(gè) !important 規(guī)則。
如果，不考慮 !important 規(guī)則，那么實(shí)際的 CSS 優(yōu)先級(jí)為(序號(hào)越高，優(yōu)先級(jí)越高)：
- @layer A.B。
- @layer A。
- @layer C.D。
- @layer C。
- 非 layer 包裹塊。
那么，
的顏色應(yīng)該為黑色 black。然而，這里給 @layer C.D 的
添加了一個(gè) !important 規(guī)則。
實(shí)際上，最終
的顏色為 green，也就是最終的優(yōu)先級(jí)排序?yàn)?序號(hào)越高，優(yōu)先級(jí)越高)：
- @layer A。
- @layer A.B。
- @layer C。
- 非 layer 包裹塊。
- !important 下的 @layer C.D。
也就是說，這里 !important 規(guī)則的優(yōu)先級(jí)還是凌駕于非 !important 規(guī)則之上的。
上述 DEMO 還是比較有意思的，感興趣的可以看看：CodePen Demo -- CSS Cascade @layer Demo[5]。
非 @layer 包含塊 !important 與 @layer 包含塊 !important
到這里，你也許會(huì)以為你懂了。好，我們?cè)賮砜匆粋€(gè) DEMO，如果我們給非 @layer 包含塊，也加上一個(gè) !important 規(guī)則，事情就變得有趣了。
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;
}
}
}仔細(xì)看上述代碼，非 @layer 包含塊，我們也加上了一個(gè) !important 規(guī)則，按照上述我能描述的規(guī)則來看，非 @layer 包含塊的優(yōu)先級(jí)高于 @layer 包含塊，那么正常而言，我們不難猜測(cè)，這里 background: black!important 的優(yōu)先級(jí)應(yīng)該要比 background: green!important 高，最終
應(yīng)該展示黑色。
而實(shí)際上，這里最終
的顏色還是 green。這里就又有一個(gè)非常有意思的知識(shí)點(diǎn)了，!important 下樣式優(yōu)先級(jí)的規(guī)則與非 !important 正常狀態(tài)下剛好相反。
網(wǎng)站名稱：2022年受矚目的新特性CSS@layer到底是個(gè)啥？
轉(zhuǎn)載注明：http://m.fisionsoft.com.cn/article/dhdssee.html
這是一個(gè)非常重要的特性，在比較正常(非 !important)規(guī)則時(shí)，越是級(jí)聯(lián)(排序較后的 @layer 規(guī)則)，優(yōu)先級(jí)越低;反之，在比較 !important 規(guī)則時(shí)，越是級(jí)聯(lián)靠后的(排序較后的 @layer 規(guī)則)，優(yōu)先級(jí)越高。
這個(gè)，更進(jìn)一步的話，我們需要去了解 CSS Cascading 相關(guān)的知識(shí)了。
CSS Cascade 規(guī)范
在 CSS @layer 之前，我們簡(jiǎn)單看一張圖：
上圖表面的是在沒有 CSS @layer 之前，CSS 樣式申明的優(yōu)先級(jí)排序，根據(jù) CSS Cascading 4(Current Work)[6] 標(biāo)準(zhǔn)，定義的當(dāng)前規(guī)范下申明的層疊順序優(yōu)先級(jí)如下(越往下的優(yōu)先級(jí)越高，下面的規(guī)則按升序排列)：
- Normal user agent declarations。
- Normal user declarations。
- Normal author declarations。
- Animation declarations。
- Important author declarations。
- Important user declarations。
- Important user agent declarations。
- Transition declarations。
按照上述算法，可以得到一個(gè)樣式優(yōu)先級(jí)的排序，大概是這樣(越往下的優(yōu)先級(jí)越高，下面的規(guī)則按升序排列)：
- User Agent - 用戶代理普通樣式。
- User - 用戶設(shè)置的普通樣式。
- Author - 頁面作者普通樣式。
- Animations - 動(dòng)畫樣式。
- ?Author - 頁面作者 !important 樣式。
- ?User - 用戶設(shè)置的 !important 樣式。
- ?User Agent - 用戶代理的 !important 樣式。
- Transitions - 過渡樣式。
簡(jiǎn)單解釋一下：用戶代理樣式：瀏覽器會(huì)有一個(gè)基本的樣式表來給任何網(wǎng)頁設(shè)置默認(rèn)樣式。這些樣式統(tǒng)稱用戶代理樣式頁面作者樣式：網(wǎng)頁的作者可以定義文檔的樣式，這是最常見的樣式表。大多數(shù)情況下此類型樣式表會(huì)定義多個(gè)，它們構(gòu)成網(wǎng)站的視覺和體驗(yàn)，即頁面主題，可以理解為頁面作者樣式用戶樣式：讀者，作為瀏覽器的用戶，可以使用自定義樣式表定制使用體驗(yàn)，自定義用戶偏好，可以理解為用戶樣式。
關(guān)于 CSS Cascading，也就是層疊規(guī)范，你可以看看我的這篇文章加深理解 -- 深入理解 CSS(Cascading Style Sheets)中的層疊(Cascading)[7]。
而當(dāng)有了 CSS @layer 之后，這個(gè)層疊優(yōu)先級(jí)順序有了更新，具體優(yōu)先級(jí)如下：
整體會(huì)變更為復(fù)雜一些，但是總體還是遵循了兩個(gè)規(guī)則：
- !important 樣式高于非 !important 樣式。
- 在比較 !important 規(guī)則時(shí)，優(yōu)先級(jí)順序與正常規(guī)則相反，在正常狀態(tài)下優(yōu)先級(jí)越低的，在 !important 下優(yōu)先級(jí)越高。
總結(jié)一下
綜上，便是關(guān)于 CSS @layer 的基礎(chǔ)相關(guān)知識(shí)。
CSS @layer 的誕生，讓我們有能力更好的劃分頁面的樣式層級(jí)，更好的處理內(nèi)部樣式與外部引用樣式的優(yōu)先級(jí)順序，屬于比較重大的一次革新。
同時(shí)，它也讓我們意識(shí)到要逐漸摒棄大規(guī)模使用 !important 去覆蓋樣式優(yōu)先級(jí)的錯(cuò)誤做法，避免許多因?yàn)閮?yōu)先級(jí)問題帶來的不必要的副作用。
當(dāng)然，時(shí)至今天(2022-03-14)，我們來看一眼兼容性：
雖然紅了一大片，但是，在最新版的 Chrome、Safari、Firefox、Edge 都已經(jīng)開始支持 CSS @layer，并且，目前已經(jīng)可以通過一些 polyfill 初步使用它，相信在不久的將來，它將會(huì)成為業(yè)務(wù) CSS 代碼中必不可少的一部分。
最后
好了，本文到此結(jié)束，希望對(duì)你有幫助！
參考資料
[1]CSS Cascading and Inheritance Level 5: https://www.w3.org/TR/css-cascade-5/#at-layer。
[2]CSS: https://developer.mozilla.org/en-US/docs/Web/CSS。
[3]@規(guī)則: https://developer.mozilla.org/en-US/docs/Web/CSS/At-rule。
[4]@import: https://developer.mozilla.org/zh-CN/docs/Web/CSS/@import。
[5]CodePen Demo -- CSS Cascade @layer Demo: https://codepen.io/Chokcoco/pen/KKZKBRr。
[6]CSS Cascading 4(Current Work): https://drafts.csswg.org/css-cascade-4/#cascading。
[7]深入理解 CSS(Cascading Style Sheets)中的層疊(Cascading): https://github.com/chokcoco/iCSS/issues/76。
網(wǎng)站名稱：2022年受矚目的新特性CSS@layer到底是個(gè)啥？
轉(zhuǎn)載注明：http://m.fisionsoft.com.cn/article/dhdssee.html
公司名稱：四川綿陽平武網(wǎng)站建設(shè)工作室 聯(lián)系電話：18980820575
網(wǎng)站備案號(hào)：蜀ICP備2024061352號(hào)-3
四川平武建站 四川平武網(wǎng)站建設(shè) 四川平武網(wǎng)站設(shè)計(jì) 四川平武網(wǎng)站制作 成都做網(wǎng)站