CSS @layer 规则

定義と使用方法

CSS @layer ルールはCSSカスケードレイヤー（カスケードレイヤー）のスタイル評価順序を制御するために使用できます。

これはまずレイヤーを定義し、特定の順序で評価する必要があるルールセットをそのレイヤーに括弧で囲むことで実現されます。

@layer 名前を付けるかどうかに関係なく定義できます。

名前が付いていない @layer と呼ばれるアニミングレイヤー。アニミングレイヤーは宣言の順序に従って評価されます（以下の例を参照）。デフォルトのカスケード順序に従います（上から下）。

ユニークな名前を持つ @layer と呼ばれるネーミングレイヤー。ネーミングレイヤーを使用することで、必要な精確なカスケード順序を指定できます（以下の例を参照）。順序は最も一般的から最も具体的な順に左から右に並べます。

例

例 1

アニミングレイヤーを使用（デフォルトのカスケード順序に従います - 上から下）：

/* レイヤー 1 */
@layer {
  body {
    background: pink;
  }
}
/* レイヤー 2 */
@layer {
  body {
    background: lightblue; /* 最後のレイヤーが有効 */
  }
}

自分で試してみてください

例 2

ネーミングレイヤーを使用（必要な精確なカスケード順序を指定）：

/* 精確なカスケード順序を指定 */
@layer bgblue, bgpink;
/* レイヤー 1 */
@layer bgpink {
  body {
    background: pink; /* 有効 */
  }
}
/* レイヤー 2 */
@layer bgblue {
  body {
    background: lightblue;
  }
}

自分で試してみてください

CSS文法

@layer name {
  css declarations;
}

属性値

ブラウザのサポート

テーブルの数字は、@ルールを完全にサポートする最初のブラウザのバージョンを示しています。