CSS3 @layer の新機能について 1 つの記事で学びましょう

この記事では、CSS3 の新機能 @layer について詳しく説明します。お役に立てれば幸いです。

2022年に入り、CSSの新機能が続々と登場していますが、最近CSS界隈で最も注目を集めている新機能がCSS @layerに他なりません。 。

この記事では、読者に新しい CSS @layer 仕様が何であるかをすぐに理解してもらうために、最も簡潔な言語を使用します。

過去に CSS の優先順位に存在した問題

ページ開発時にカスタム スタイルなど、ページに多くのスタイルがある場合、コンポーネントライブラリのスタイル。 現時点では、スタイルは非常に混乱しており、管理が困難になります。

私たちが作成したものではないスタイルをオーバーライドしたい場合、多くの場合、より優先順位の高いスタイル名を使用して、それらのスタイルをオーバーライドする必要があります。

同時に、スタイルの優先順位を制御するのが難しいと感じる場合、開発者はそれを解決するために #!重要 を悪用することに慣れており、これが将来的にスタイル構造をさらに混乱させることになります。

CSS をより適切に制御および管理できるようにするという背景に基づいて、CSS @layer が誕生しました。

CSS @layer とは何ですか?

CSS @layer は、

CSS Cascading and Inheritance Level 5 から定義されています。

CSS @layer とは何ですか?簡単に言うと、

CSS @rule の @layer はカスケード レイヤーを宣言し、同じレイヤー内のルールは一緒にカスケードされます。これにより、開発者はカスケード メカニズムを制御できるようになり、より多くの制御が可能になります。

構文も非常に単純です。次の例を見てください:

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

このようにして、utilities という名前の @layer カスケード レイヤーを作成します。

@layer カスケード レイヤーの使用方法?

@layer カスケード レイヤーによるスタイルの優先度の管理

@layer カスケード レイヤーの最大の機能は、異なるスタイル間の優先度を制御することです。

次の例を見て、2 つの @layer カスケード レイヤー A と B を定義します。

<div></div>

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

@layer B の順序は @ レイヤーの後にランク付けされているためA なので、@layer B のすべてのスタイルの優先度は @layer A よりも高く、div の最終色は green:

もちろん、ページ内に @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 という 3 つの @layer カスケード レイヤーを定義します。次に、各カスケード レイヤーの CSS コードが後続の CSS コードに追加されますが、スタイルの優先順位は次のとおりです:

A > C > B

したがって、最終 div のカラー値は @layer A で定義されたカラー、つまり

blue:

この時点で、CSS @layer の役割が明確にわかります。

CSS @layer を使用すると、さまざまな CSS モジュールをさまざまな @layer に分割し、その順序を使用してグローバル スタイルの優先順位を制御できます。

@layer カスケード レイヤーの定義を導入する 3 つの方法

@layer カスケード レイヤーの定義を導入するには、上記で説明した 2 つの方法があります。ここでもう一度説明します。 CSS を導入します。 @layer レイヤーをカスケードする方法。

1. レイヤー内で機能する CSS ルールを含む、ブロックレベルの @layer ルールを直接作成します:

@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：

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

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> 添加了一个 <code>!important 规则。

如果，不考虑 !important 规则，那么实际的 CSS 优先级为（序号越高，优先级越高）：

• @layer A.B

• @layer A

• @layer C.D

• @layer C

• 非 layer 包裹块

那么，<div> 的颜色应该为黑色 <code>black。然而，这里给 @layer C.D 的 <div> 添加了一个 <code>!important 规则。

实际上，最终 <div> 的颜色为 <code>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> 应该展示黑色。<p>而实际上，这里最终 <code><div> 的颜色还是 <code>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 のサポートが開始されており、現在はいくつかのポリフィルを通じて最初に使用できます。近い将来、ビジネス CSS コードに不可欠な部分になると考えられます。

詳細情報

CSS @layer については、インターネット上で多くの議論が行われています。質の高い記事をいくつか紹介します。興味があれば、読み続けてください:

• カスケード レイヤーの説明
• CSS カスケード レイヤーの開始
• 記事内の一部のスクリーンショットは から引用されています。 ! important は実際にどのように機能しますか? (それはあなたが考えているものではありません!)

最後に

# さて、この記事はここで終わります、お役に立てば幸いです。 )

（学習ビデオ共有：webfrontend）