CSS 超好懂的@Layer教學

乍看layer這個字,還以為是像Photoshop的圖層概念之類的東西,亦或是針對z-index之類的selector。結果竟是用來解決selector權重用的(對於CSS權重不是很了解的話,可以快速看一下這篇筆記。)依照layer宣告的順序,來決定樣式優先順序,後宣告的即使權重較小,也會覆寫。

這對於管理較大型、有一個一定複雜程度的樣式表的網站時,算是一個蠻實用的功能。可以減少在那邊important來important去的問題。

至於@layer的瀏覽器相容性,可以看一下這邊 https://caniuse.com/css-cascade-layers,目前看起來主流瀏覽器已經都支援,現階段已可以放心使用沒問題。

怎麼用?

將需要被分層級的樣式,用 @layer layername { … } 包起來,或者在import的時候宣告,例如:@import ‘base.css’ layer(base);。這時就已經會依照上述的順序規則來呈現結果了。

也可以另外宣告 layers 的順序,@layer 也可以是巢狀結構:

如果只宣告一個layer的順序呢?

假設我們有三個layers,如下面的例子:

我們重新宣告了 @layer layerThree; 的順序,那最下方的 <div class=”css-layer”> 會顯示什麼顏色的匡線呢?

答案是紅色匡線。為什麼呢?明明只宣告了layerThree,其他的為什麼也會跑進來參一咖?

因為即使沒有宣告所有Layer的順序,沒被宣告的Layer還是依然存在,且順序如同樣式表中的順序往後排在宣告過的layer後面。也就是說,剛剛雖然僅宣告了layerThree,最後得到的順序會是:

layerThree, layerOne, layerTwo

也就是layerTwo最為優先。同理,如果只宣告了 layerTwo,順序會變成:

layerTwo, layerOne, layerThree

變成layerThree最為優先。

non-layered style以及!important

non-layered style 比 layered style 優先,就算寫在 layered style之前也一樣。例如:

而 !important 就比較有趣。假設兩個都是 layered style 的 important ,優先度會依照寫的順序或宣告的順序而定。假設其中一個是non-layered style,卻是以layered style 的 !important 為優先。

參考資料:https://developer.mozilla.org/zh-CN/docs/Web/CSS/@layer

在〈CSS 超好懂的@Layer教學〉中有 2 則留言

  1. 引入外部样式,然后改变其顺序,似乎不生效。
    @layer component-1,component,importLayer;

    // @import ‘./import.css’;
    @import url(‘./import.css’) layer(importLayer); 新希望 importLayer 最优先,不工作。请问这是为什么

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *

這個網站採用 Akismet 服務減少垃圾留言。進一步了解 Akismet 如何處理網站訪客的留言資料