CSS Reference

@layer

カスケードレイヤーを宣言する

@layer 規則はカスケードレイヤーを宣言します。

CSS にはもっとも基本的な概念として「カスケード（Cascade）」、「継承（Inheritance）」、そして「詳細度 （Specificity）」が存在します。

その中で、「詳細度」に関して簡単にいえば、記述されたスタイルが、セレクターの種類に応じて、どのような優先順位で実際の要素に適用されるのかをブラウザが決定するための手段です。

この詳細度のコントロールを、レイヤー構造にしてより扱いやすくしようという仕組みが @layer 規則です。例えば CSS フレームワークの導入や、複数の作業者による CSS のコーディングなどが行われる状況において、予期せずスタイルが上書きされたりといったトラブルを回避するなどの効果が期待されます。

詳細説明

例えば、下記のようなスタイル宣言があった場合、

<!-- HTML -->
<div id="sample">
  <span>text</span>
</div>

/* CSS */
div#sample span {
  color: green;
}

div span {
  color: blue;
}

span {
  color: red;
}

ソースコード上の記述順でいえば、color: red; が最後に書かれていますが、使用されているセレクタの「詳細度」から、実際には color: green; が適用されることになります。

もちろん、インラインスタイル （style 属性による要素への直接的な指定） や、!important を使用することで適用されるスタイルを変更することはできる他、:where() 疑似クラスのように、セレクタの詳細度を「0」にする方法なども存在しますが、CSS を記述する際に、「詳細度」を意識して記述することは基本となります。

@layer の働き

冒頭にも書いたとおり、この詳細度のコントロールを、レイヤー構造にしてより扱いやすくしようという仕組みが @layer 規則です。

具体的な例を挙げてみましょう。

span {
  color: blue;
}

span {
  color: red;
}

まず基本的なことですが、上記のように、詳細度が同じスタイル宣言が存在した場合、ソースコード上、後に記述された color: red; が要素に適用されます。これを @layer 規則を使用して下記のように書き換えてみましょう。

@layer theme {
  span {
    color: blue;
  }
}

@layer utilities {
  span {
    color: red;
  }
}

この状態でも、ソースコード上、後に記述された color: red; が要素に適用されます。詳細度が同じなので、後に記述されたスタイルが適用されていると考えれば理解しやすいでしょう。

そこで、これを下記のように書き換えてみます。div span というセレクタの方が詳細度が高いため、@layer 規則を使用していない状態だと color: blue; が適用されるはずの記述になっていますが、@layer 規則を使用した場合は、カスケードレイヤー単位での優先順位が勝る （@layer utilities {...} の方が後に記述されている） ため、color: red; が要素に適用されます。

@layer theme {
  div span {
    color: blue;
  }
}

@layer utilities {
  span {
    color: red;
  }
}

しかし、この CSS ファイルの冒頭に、下記のような記述を加えるだけで、ソースコード上の記述順に関係なく、適用されるスタイル （カスケードレイヤー） の優先順位を変更することができます （color: blue; が要素に適用されます）。

@layer utilities, theme;

@layer theme {
  div span {
    color: blue;
  }
}

@layer utilities {
  span {
    color: red;
  }
}

このように、@layer 規則によって適切なカスケードレイヤーを定義しておくことで、スタイルのコントロールが容易になるでしょう。

ただし、スタイルのスコープ （適用範囲の絞り込み） に関しては別途セレクタの適切な選択によって行う必要があります。

@layerのサンプルソース

audio {
   display: flex;
}

@layer reset {
   audio[controls] {
      display: block;
   }
}
@layer framework, override;

@layer override {
   @keyframes slide-left {
      from { translate: 0; }
      to { translate: -100% 0; }
   }
}

@layer framework {
   @keyframes slide-left {
      from { margin-left: 0; }
      to { margin-left: -100%; }
   }
}
/* 
@layer は入れ子にして記述もできます
*/

@layer base {
   p { max-width: 70ch; }
}

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

   @layer theme {
      p { color: #222; }
   }
}
/*
@import で読み込むスタイルシートに対しても @layer は定義可能です
*/

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

主要ブラウザの対応

IE11 ×
Edge（EdgeHTML） ×
Edge（Chromium） ○
Chrome ○+99
Firefox ○+97
Safari ○+15.4
iOS Safari ○+15.4
Android Chrome ○

関連する@-規則

仕様書

用途から CSS プロパティやセレクタを探す

用途から CSS プロパティやセレクタを逆引きできます。

対応ブラウザから CSS プロパティやセレクタを探す

対応ブラウザから CSS プロパティやセレクタを逆引きできます。

Edge（EdgeHTML）
Edge（Chromium）
Firefox
Chrome
Safari
iOS Safari
Android Chrome