如何在vue中繼續(xù)使用layer.js，親測(cè)好用

ayer.js是一個(gè)方便的彈出層插件，切圖網(wǎng)專注于PSD2HTML等前端切圖多年，后轉(zhuǎn)向Vue開(kāi)發(fā)。在vue開(kāi)發(fā)過(guò)程中引入layer.js的時(shí)候遇到了麻煩。原因是layer.js不支持import導(dǎo)入，這時(shí)就需要修改一下它的源碼。在看過(guò)它的源碼后，發(fā)現(xiàn)需要修改的地方只有兩處，

源碼中已經(jīng)暴露了一個(gè)全局變量layer，故只需在腳本末尾處添加

export default layer;

這表示將這個(gè)全局變量導(dǎo)出。

然后在文件中找到下面的代碼注釋掉，這段代碼是為layer添加樣式的，但使用的路徑不對(duì)，故沒(méi)有太大幫助。

document.head.appendChild(function() {
    var link = doc.createElement('link');
    link.href = path + 'need/layer.css?2.0';
    link.type = 'text/css';
    link.rel = 'styleSheet'link.id = 'layermcss';
    return link;
} ());

接下來(lái)把layer.js和layer.css分別放入static/js和static/css中，在需要的地方，比如組件內(nèi)部或者全局注冊(cè)，因?yàn)轫?xiàng)目多處都會(huì)用到，所以采用全局注冊(cè)，在main.js中

import layer from '../static/js/layer.js'

layer.css也使用全局注冊(cè)，它可以放在index.html中通過(guò)link引入，也可以放在App.vue中

<!--index.html-->
<link rel="stylesheet" href="./static/css/layer.css" />
<!--或者-->
<!--App.vue-->
<style>
@import "../static/css/layer.css";
</style>

接下來(lái)就能在各個(gè)組件中使用layer.open等方法了。

這種方式應(yīng)該可以適用于各種不支持import導(dǎo)入的腳本，即非npm提供的module。

往 css 優(yōu)先級(jí)中存在的問(wèn)題

如果我們的頁(yè)面上存在非常多的樣式，譬如有我們開(kāi)發(fā)頁(yè)面的時(shí)候的自定義樣式，也有引入的組件庫(kù)樣式。這時(shí)候樣式將會(huì)非常混亂難以管理。

當(dāng)我們想覆蓋一些本身非我們書(shū)寫(xiě)的樣式時(shí)候，往往不得不通過(guò)使用優(yōu)先級(jí)權(quán)重更高的樣式名，去覆蓋那些樣式。

同時(shí)，當(dāng)樣式優(yōu)先級(jí)感到難以控制時(shí)，開(kāi)發(fā)者習(xí)慣濫用 !important 去解決，這又循環(huán)導(dǎo)致了后續(xù)更混亂的樣式結(jié)構(gòu)。

基于讓 CSS 得到更好的控制和管理的背景，CSS @layer 應(yīng)運(yùn)而生。

何為 CSS @layer？

CSS Cascade Layers，也叫做CSS級(jí)聯(lián)層，是Cascading and Inheritance Level5 規(guī)范中新增了一個(gè)新的 CSS 特性。

@layer聲明了一個(gè) 級(jí)聯(lián)層，同一層內(nèi)的規(guī)則將級(jí)聯(lián)在一起，這給予了開(kāi)發(fā)者對(duì)層疊機(jī)制的更多控制。語(yǔ)法也非常簡(jiǎn)單，看這樣一個(gè)例子：

@layer utilities {

  /* 創(chuàng)建一個(gè)名為 utilities 的級(jí)聯(lián)層 */

}

這樣，我們就創(chuàng)建一個(gè)名為 utilities 的 @layer 級(jí)聯(lián)層。

@layer語(yǔ)法

@layer規(guī)則可以通過(guò)三種方式其一來(lái)創(chuàng)建級(jí)聯(lián)層。第一種方法如上方代碼所示，它創(chuàng)建了一個(gè)塊級(jí)的@規(guī)則，其中包含作用于該層內(nèi)部的CSS規(guī)則。

@layer utilities {

  .padding-sm {

    padding: .5rem;

  }




  .padding-lg {

    padding: .8rem;

  }

}

一個(gè)級(jí)聯(lián)層同樣可以通過(guò) @import 來(lái)創(chuàng)建，規(guī)則存在于被引入的樣式表內(nèi)：

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

你也可以創(chuàng)建帶命名的級(jí)聯(lián)層，但不指定任何樣式。例如，單一的命名層：

@layer utilities

或者，多個(gè)命名層也可以被同時(shí)定義。例如：

@layer theme, layout, utilities

這一做法很有用，因?yàn)閷幼畛醣恢付ǖ捻樞驔Q定了它是否有父級(jí)層。對(duì)于聲明而言，如果同一聲明在多個(gè)級(jí)聯(lián)層中被指定，最后一層中的將優(yōu)先于其他層。

因此，在上面的例子中，如果 theme 層和 utilities 層中存在沖突的規(guī)則，那么 utilities 層中的將優(yōu)先被應(yīng)用。

即使 utilities 層中規(guī)則的優(yōu)先級(jí)低于 theme 層中的，該規(guī)則仍會(huì)被應(yīng)用。一旦級(jí)聯(lián)層順序建立之后，優(yōu)先級(jí)和出現(xiàn)順序都會(huì)被忽略。

這將使創(chuàng)建CSS選擇器變得更加簡(jiǎn)單，因?yàn)槟悴恍枰_保每一個(gè)選擇器都有足夠高的優(yōu)先級(jí)來(lái)覆蓋其他沖突的規(guī)則，你只需要確保它們出現(xiàn)在一個(gè)順序更靠后的級(jí)聯(lián)層中。

注：在已經(jīng)聲明級(jí)聯(lián)層的名字后，它們的順序隨即被確立，你可以重復(fù)聲明某級(jí)聯(lián)層的名字來(lái)向其添加CSS規(guī)則。這些樣式將被附加到該層的末尾，且級(jí)聯(lián)層之間的順序不會(huì)改變。

其他不屬于任何一級(jí)聯(lián)層的樣式將被集中到同一匿名層，并置于所有層的前部，這意味著任何級(jí)聯(lián)層內(nèi)定義的規(guī)則都將覆蓋外部聲明的規(guī)則。

嵌套層

級(jí)聯(lián)層允許嵌套，例如：

@layer framework {

  @layer layout {




  }

}

向 layout 層內(nèi)部的 framework 層附加規(guī)則，只需用 . 連接這兩層。

@layer framework.layout {

  p {

    margin-block: 1rem;

  }

}

匿名層

如果創(chuàng)建了一個(gè)級(jí)聯(lián)層但并未指定名字，例如：

@layer {

  p {

    margin-block: 1rem;

  }

}

那么則稱為創(chuàng)建了一個(gè)匿名層。除創(chuàng)建后無(wú)法向其添加規(guī)則外，該層和其他命名層功能一致。

標(biāo)準(zhǔn)語(yǔ)法

@layer [ <layer-name># | <layer-name>?  {

  <stylesheet>

} ]

@layer如何使用

創(chuàng)建級(jí)聯(lián)層

級(jí)聯(lián)層可以通過(guò)多種方式聲明：

1、使用@layer 塊規(guī)則，并立即為其分配樣式：

@layer reset {

  * { /* Poor Man's Reset */

    margin: 0;

    padding: 0;

  }

}

2、使用規(guī)則@layer 語(yǔ)句，沒(méi)有指定任何樣式：

@layer reset;

3、將@import 與layer關(guān)鍵字或layer()函數(shù)一起使用

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

以上每一個(gè)都創(chuàng)建了一個(gè)名為的級(jí)聯(lián)層reset。

管理級(jí)聯(lián)層

級(jí)聯(lián)層會(huì)按它們聲明的順序排序。

在下面的例子中，我們建立四個(gè)級(jí)聯(lián)層：reset，base，theme，和utilities。

@layer reset { /* 創(chuàng)建級(jí)聯(lián)層 “reset” */

  * {

    margin: 0;

    padding: 0;

  }

}




@layer base { /* 創(chuàng)建級(jí)聯(lián)層 “base” */

  …

}




@layer theme { /* 創(chuàng)建級(jí)聯(lián)層 “theme” */

  …

}




@layer utilities { /* 創(chuàng)建級(jí)聯(lián)層 “utilities” */

  …

}

按照它們的聲明順序，層順序變?yōu)椋?/span>

reset
base
theme
utilities

重復(fù)使用級(jí)聯(lián)層名稱時(shí)，樣式將附加到現(xiàn)有級(jí)聯(lián)層。級(jí)聯(lián)層的順序保持不變，因?yàn)橹挥械谝淮蔚某霈F(xiàn)已經(jīng)確定順序：

@layer reset { /* 創(chuàng)建第一個(gè)級(jí)聯(lián)層 “reset” */

  …

}




@layer base { /* 創(chuàng)建第二個(gè)級(jí)聯(lián)層 “base” */

  …

}




@layer theme { /* 創(chuàng)建第三個(gè)級(jí)聯(lián)層 “theme” */

  …

}




@layer utilities { /* 創(chuàng)建第四個(gè)級(jí)聯(lián)層 “utilities” */

  …

}




@layer base { /* 會(huì)將樣式添加至級(jí)聯(lián)層“base” */

  …

}

重新使用級(jí)聯(lián)層名稱時(shí)層順序保持不變的使@layer 語(yǔ)法變得更加方便和嚴(yán)謹(jǐn)。使用它，可以預(yù)先建立圖層順序，然后將所有 CSS 附加到它：

@layer reset;     /* 創(chuàng)建第一個(gè)級(jí)聯(lián)層 “reset” */

@layer base;      /* 創(chuàng)建第二個(gè)級(jí)聯(lián)層 “base” */

@layer theme;     /* 創(chuàng)建第三個(gè)級(jí)聯(lián)層“theme” */

@layer utilities; /* 創(chuàng)建第四個(gè)級(jí)聯(lián)層 “utilities” */




@layer reset { /* 添加樣式至級(jí)聯(lián)層 “reset” */

  …

}




@layer theme { /* 添加樣式至級(jí)聯(lián)層  “theme” */

  …

}




@layer base { /* 添加樣式至級(jí)聯(lián)層  “base” */

  …

}




@layer theme { /* 添加樣式至級(jí)聯(lián)層  “theme” */

  …

}

當(dāng)然你可以用更短的語(yǔ)法來(lái)聲明級(jí)聯(lián)層，

@layer reset, base, theme, utilities;

從上面可以看出，多個(gè)級(jí)聯(lián)層被聲明時(shí)，最后一個(gè)級(jí)聯(lián)層的聲明會(huì)獲勝。像這樣，

@import(reset.css) layer(reset); /* 第一個(gè)級(jí)聯(lián)層 */




@layer base { /* 第二個(gè)級(jí)聯(lián)層 */

  form input {

    font-size: inherit; 

  }

}




@layer theme { /*第三個(gè)級(jí)聯(lián)層 */

  input {

    font-size: 2rem;

  }

}

按以往CSS級(jí)聯(lián)來(lái)進(jìn)行分析的話，form input（多層級(jí)）的優(yōu)先級(jí)會(huì)大于input,但是由于級(jí)聯(lián)層所起的作用，@layer theme的input會(huì)取勝。

級(jí)聯(lián)層嵌套

級(jí)聯(lián)層支持嵌套使用，如下：

@layer base { /* 第一個(gè)級(jí)聯(lián)層*/

  p { max-width: 70ch; }

}




@layer framework { /* 第二個(gè)級(jí)聯(lián)層 */

  @layer base { /* 第二級(jí)聯(lián)層的嵌套子級(jí)聯(lián)層1 */

    p { margin-block: 0.75em; }

  }




  @layer theme { /* 第二級(jí)聯(lián)層的嵌套子級(jí)聯(lián)層2 */

    p { color: #222; }

  }

}

在這個(gè)例子中有兩個(gè)級(jí)聯(lián)外層：

base
framework

該framework層本身也包含兩層：
base
theme

如果要將樣式附加到嵌套級(jí)聯(lián)層，需要使用以下全名來(lái)引用它，

@layer framework {

  @layer default {

     p { margin-block: 0.75em; }

  }




  @layer theme {

    p { color: #222; }

  }

}




@layer framework.theme {

  /* 這些樣式會(huì)被添加到@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; }

  }

}

如果第一個(gè)@media (min-width: 30em)匹配（基于視口尺寸），則layout級(jí)聯(lián)層層將在圖層順序中排在第一位。如果只有@media (prefers-color-scheme: dark)匹配，theme則將是第一層。

如果兩者匹配，則圖層順序?qū)閘ayout, theme。如果沒(méi)有匹配，則不定義層。

近在Weekly郵件推送中查閱到這樣的一條信息：

Chromium 團(tuán)隊(duì)宣布他們將隨 Chromium 99（預(yù)計(jì)在明年 3 月發(fā)布）一起發(fā)布CSS Cascade Layers

會(huì)發(fā)現(xiàn)這條信息里面出現(xiàn)了一個(gè)CSS的新名詞CSS Cascade Layers，出于好奇以及對(duì)新知識(shí)的渴望（說(shuō)得我自己都信了，哈哈），于是查閱起CSS Cascade Layers的相關(guān)資料，試圖搞懂它。

前置知識(shí)

at-rule規(guī)則

at-rule規(guī)則， CSS Conditional Rules Module Level 3新增的規(guī)則，是一條語(yǔ)句，它為CSS提供了執(zhí)行或如何執(zhí)行的指令，常見(jiàn)的at-rule規(guī)則有：

@import，允許用戶從其他樣式表導(dǎo)入樣式規(guī)則
@font-face，允許我們引用自定義的字體
@keyframes，聲明一個(gè)動(dòng)畫(huà)
@media，是條件CSS中的一種，其條件是一個(gè)媒體查詢
@supports，測(cè)試用戶代理是否支持CSS屬性/值對(duì)
@viewport，用來(lái)控制移動(dòng)設(shè)備上的viewport設(shè)置

Cascading and Inheritance Level

級(jí)聯(lián)(層疊)與繼承經(jīng)過(guò)多年的發(fā)展迭代，目前已有多個(gè)版本（CSS2.2、Level3、Level4 和 Level5）

何為級(jí)聯(lián)（層疊）？

層疊本質(zhì)就是定義了如何合并來(lái)自多個(gè)源的屬性值的算法，簡(jiǎn)單來(lái)說(shuō)，CSS規(guī)則的順序很重要。當(dāng)兩條同級(jí)別的規(guī)則應(yīng)用到一個(gè)元素的時(shí)候，寫(xiě)在后面的就是實(shí)際使用的規(guī)則。

h1 { 
    color: red; 
}
h1 { 
    color: blue; 
}

兩條規(guī)則優(yōu)先級(jí)相同，所以順序在最后的生效，h1是color:blue'勝出'，顯示藍(lán)色。

只有CSS聲明，就是屬性名值對(duì)，會(huì)參與層疊計(jì)算。這表示包含CSS聲明以外實(shí)體的@規(guī)則不參與層疊計(jì)算，如包含描述符的@font-face，@規(guī)則（at-rule規(guī)則）是做為一個(gè)整體參與層疊計(jì)算。

css屬性一般來(lái)自于哪幾個(gè)源？

1、用戶代理樣式表：瀏覽器的基本的樣式表，用于給所有網(wǎng)頁(yè)設(shè)置默認(rèn)樣式。
2、用戶樣式表：網(wǎng)頁(yè)的作者可以定義文檔的樣式。大多數(shù)情況下此類型樣式表會(huì)定義網(wǎng)站的主題。
3、瀏覽器的用戶使用自定義樣式表定制使用體驗(yàn)。

層疊（級(jí)聯(lián)）算法如何過(guò)濾來(lái)自不同源的css規(guī)則？

相互沖突的聲明按以下順序適用，后一種聲明將覆蓋前一種聲明：

1、用戶代理樣式表中的聲明(瀏覽器的默認(rèn)樣式)。
2、用戶樣式表中的常規(guī)聲明(用戶設(shè)置的自定義樣式，就如同我們的reset.css)。
3、作者樣式表中的常規(guī)聲明(開(kāi)發(fā)人員設(shè)置的樣式)。
4、作者樣式表中的!important聲明
5、用戶樣式表中的!important 聲明

過(guò)濾來(lái)自不同源的css規(guī)則后，確定同源優(yōu)先級(jí)高低，決定誰(shuí)“優(yōu)勝”

  !important > 內(nèi)聯(lián)style > #id > .class > 標(biāo)簽

了解級(jí)聯(lián)算法有助于幫助我們理解瀏覽器是如何解決樣式規(guī)則沖突，也就是瀏覽器決定哪個(gè)樣式規(guī)則運(yùn)用到元素上，更多相關(guān)css級(jí)聯(lián)的了解：

何為繼承？

當(dāng)元素的一個(gè)繼承屬性沒(méi)有指定值時(shí)，則取父元素的同屬性的計(jì)算值。只有文檔根元素取該屬性定義的默認(rèn)值，類似的屬性有color、font-size等。

CSS是由Cascading Style Sheets三個(gè)詞的首字母縮寫(xiě)，很多人將其稱為層疊樣式表或者級(jí)聯(lián)樣式表.

@layer

CSS Cascade Layers，也叫做CSS級(jí)聯(lián)層，是Cascading and Inheritance Level5 規(guī)范中新增了一個(gè)新的 CSS 特性，對(duì)應(yīng)的CSS屬性寫(xiě)法@layer,即一個(gè)新的 @ 規(guī)則，也就是大家所說(shuō)的at-rule 規(guī)則。

為啥會(huì)出現(xiàn)@layer？

通過(guò)上面我們對(duì)級(jí)聯(lián)介紹，我們已經(jīng)看到了順序?qū)τ趯盈B的重要性，同權(quán)重的css屬性后者會(huì)“優(yōu)勝”前者，權(quán)重不同會(huì)根據(jù)CSS聲明來(lái)源和優(yōu)先級(jí)算法來(lái)判斷誰(shuí)“優(yōu)勝”。!important的CSS規(guī)則自動(dòng)將它跳到層疊算法的前面，能夠覆蓋普通規(guī)則的層疊。

也就是說(shuō)我們一般會(huì)使用選擇器權(quán)重和順序作為控制級(jí)聯(lián)的方法，但是這樣卻會(huì)時(shí)常碰到：

使用較高權(quán)重的選擇器來(lái)防止你的代碼被后面的代碼（或別人的代碼）覆蓋。但這也會(huì)引起另一個(gè)不良的現(xiàn)象，可能會(huì)在代碼中新增很多帶有 !important 的樣式規(guī)則，這本身就會(huì)引起更多的問(wèn)題，比如 !important 在 CSS 樣式表中隨處可見(jiàn)，需要覆蓋的時(shí)候難以被覆蓋。

使用較低權(quán)重的選擇器又很容易被后面的代碼（或別人的代碼）覆蓋。比如你在引入第三方代碼庫(kù)或組件時(shí)，自己的代碼可能被覆蓋。

這兩個(gè)現(xiàn)象也是編寫(xiě)CSS代碼，特別是在一個(gè)大型項(xiàng)目或多人協(xié)作的項(xiàng)目中常出現(xiàn)。也給很多CSS開(kāi)發(fā)者帶來(lái)很多困擾。

雖然社區(qū)有很多第三方方案，如CSS-in-JS、CSS Modules 和 CSS Scoped等來(lái)協(xié)助解決級(jí)聯(lián)所帶來(lái)的問(wèn)題，但由于源碼順序（打包產(chǎn)物）仍然起著決定性的作用，順序帶來(lái)的覆蓋和沖突依舊未真正的解決，而且選擇器權(quán)重仍然比層的順序（源碼順序）更重要。

這樣的背景促進(jìn)了@layer的出現(xiàn)，要真正的解決級(jí)聯(lián)帶來(lái)的這些問(wèn)題。

@layer的出現(xiàn)，也要求我們對(duì)以往css級(jí)聯(lián)有個(gè)新的了解,

可以看出CSS的級(jí)聯(lián)層一般位于“Style 屬性”（Style Attribute）和 CSS 選擇器權(quán)重（Specificity）之間。

使用CSS級(jí)聯(lián)層，可以通過(guò)@layer at-rule將 CSS 分成多個(gè)層。

與 CSS屬性來(lái)源在用戶樣式表和作者樣式表風(fēng)格之間提供權(quán)衡的方式相同，Cascade Layers 提供了一種結(jié)構(gòu)化的方式來(lái)組織和權(quán)衡單個(gè) 來(lái)源內(nèi)的關(guān)注點(diǎn)

如何使用

創(chuàng)建級(jí)聯(lián)層

級(jí)聯(lián)層可以通過(guò)多種方式聲明：

1、使用@layer 塊規(guī)則，并立即為其分配樣式：

@layer reset {
  * { /* Poor Man's Reset */
    margin: 0;
    padding: 0;
  }
}

2、使用規(guī)則@layer 語(yǔ)句，沒(méi)有指定任何樣式：

@layer reset;

3、將@import 與layer關(guān)鍵字或layer()函數(shù)一起使用

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

以上每一個(gè)都創(chuàng)建了一個(gè)名為的級(jí)聯(lián)層reset。

管理級(jí)聯(lián)層

級(jí)聯(lián)層會(huì)按它們聲明的順序排序。

在下面的例子中，我們建立四個(gè)級(jí)聯(lián)層：reset，base，theme，和utilities。

@layer reset { /* 創(chuàng)建級(jí)聯(lián)層 “reset” */
  * {
    margin: 0;
    padding: 0;
  }
}

@layer base { /* 創(chuàng)建級(jí)聯(lián)層 “base” */
  …
}

@layer theme { /* 創(chuàng)建級(jí)聯(lián)層 “theme” */
  …
}

@layer utilities { /* 創(chuàng)建級(jí)聯(lián)層 “utilities” */
  …
}

按照它們的聲明順序，層順序變?yōu)椋?/span>

reset
base
theme
utilities

@layer reset { /* 創(chuàng)建第一個(gè)級(jí)聯(lián)層 “reset” */
  …
}

@layer base { /* 創(chuàng)建第二個(gè)級(jí)聯(lián)層 “base” */
  …
}

@layer theme { /* 創(chuàng)建第三個(gè)級(jí)聯(lián)層 “theme” */
  …
}

@layer utilities { /* 創(chuàng)建第四個(gè)級(jí)聯(lián)層 “utilities” */
  …
}

@layer base { /* 會(huì)將樣式添加至級(jí)聯(lián)層“base” */
  …
}

@layer reset;     /* 創(chuàng)建第一個(gè)級(jí)聯(lián)層 “reset” */
@layer base;      /* 創(chuàng)建第二個(gè)級(jí)聯(lián)層 “base” */
@layer theme;     /* 創(chuàng)建第三個(gè)級(jí)聯(lián)層“theme” */
@layer utilities; /* 創(chuàng)建第四個(gè)級(jí)聯(lián)層 “utilities” */

@layer reset { /* 添加樣式至級(jí)聯(lián)層 “reset” */
  …
}

@layer theme { /* 添加樣式至級(jí)聯(lián)層  “theme” */
  …
}

@layer base { /* 添加樣式至級(jí)聯(lián)層  “base” */
  …
}

@layer theme { /* 添加樣式至級(jí)聯(lián)層  “theme” */
  …
}

當(dāng)然你可以用更短的語(yǔ)法來(lái)聲明級(jí)聯(lián)層，

@layer reset, base, theme, utilities;

從上面可以看出，多個(gè)級(jí)聯(lián)層被聲明時(shí)，最后一個(gè)級(jí)聯(lián)層的聲明會(huì)獲勝。像這樣，

@import(reset.css) layer(reset); /* 第一個(gè)級(jí)聯(lián)層 */

@layer base { /* 第二個(gè)級(jí)聯(lián)層 */
  form input {
    font-size: inherit; 
  }
}

@layer theme { /*第三個(gè)級(jí)聯(lián)層 */
  input {
    font-size: 2rem;
  }
}

級(jí)聯(lián)層嵌套

級(jí)聯(lián)層支持嵌套使用，如下：

@layer base { /* 第一個(gè)級(jí)聯(lián)層*/
  p { max-width: 70ch; }
}

@layer framework { /* 第二個(gè)級(jí)聯(lián)層 */
  @layer base { /* 第二級(jí)聯(lián)層的嵌套子級(jí)聯(lián)層1 */
    p { margin-block: 0.75em; }
  }

  @layer theme { /* 第二級(jí)聯(lián)層的嵌套子級(jí)聯(lián)層2 */
    p { color: #222; }
  }
}

在這個(gè)例子中有兩個(gè)級(jí)聯(lián)外層：

base
framework

該framework層本身也包含兩層：
base
theme

就像一棵樹(shù)，像這樣，

如果要將樣式附加到嵌套級(jí)聯(lián)層，需要使用以下全名來(lái)引用它，

@layer framework {
  @layer default {
     p { margin-block: 0.75em; }
  }

  @layer theme {
    p { color: #222; }
  }
}

@layer framework.theme {
  /* 這些樣式會(huì)被添加到@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; }
  }
}

如果兩者匹配，則圖層順序?qū)閘ayout, theme。如果沒(méi)有匹配，則不定義層。

結(jié)語(yǔ)

隨著 Cascade Layers 的出現(xiàn)，我們的開(kāi)發(fā)人員將擁有更多的工具來(lái)控制 Cascade。Cascade Layers 的真正力量來(lái)自它在 Cascade 中的獨(dú)特位置：Style 屬性（Style Attribute）和 CSS 選擇器權(quán)重（Specificity）之間。因此，我們不需要擔(dān)心其他層中使用的 CSS 的選擇器特異性，也不需要擔(dān)心我們將 CSS 加載到這些層中的順序.

了解到這里，是不是覺(jué)得@layer相當(dāng)?shù)豤ool，迫不及待地想去使用了，我們看一下caniuse @layer的兼容情況，

很遺憾，支持程度慘不忍睹，想真正使用可能還要再等等，對(duì)于明年三月份 Chromium 99,發(fā)布我們拭目以待。

當(dāng)然現(xiàn)在如果想嘗鮮，對(duì)于社區(qū)也有給出一些辦法，

大家也可以試一試，感謝閱讀！

在線咨詢

上一篇：SpringBoot系列（六）thymeleaf完整詳細(xì)版
下一篇：青島HTML5入門(mén)應(yīng)怎么判斷？

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營(yíng)銷服務(wù)商

如何在vue中繼續(xù)使用layer.js，親測(cè)好用

往 css 優(yōu)先級(jí)中存在的問(wèn)題

何為 CSS @layer？

@layer語(yǔ)法

嵌套層

匿名層

標(biāo)準(zhǔn)語(yǔ)法

@layer如何使用

創(chuàng)建級(jí)聯(lián)層

管理級(jí)聯(lián)層

級(jí)聯(lián)層嵌套

@media與@layer

at-rule規(guī)則

Cascading and Inheritance Level

@layer

創(chuàng)建級(jí)聯(lián)層

管理級(jí)聯(lián)層

級(jí)聯(lián)層嵌套

@media與@layer

結(jié)語(yǔ)

您的項(xiàng)目需求