CSSのカスケードレイヤー「@layer」の使い方

2022年3月14日にリリースされたSafari 15.4を機に、CSSのカスケードレイヤー「@layer」がすべてのモダンブラウザで使用できるようになりました（Chromeは99、Firefoxは97から対応しています）。

@layerは、カスケードレイヤーを宣言するためのアットルールです。スタイルをレイヤーに分けて、どのレイヤーを優先するかを決められます。CSSの詳細度や読み込み順の考え方に影響するので、仕組みを理解しておく必要があります。

今回の記事では以下のHTMLを使用します。

1<div class="container">2  <p class="text">Lorem, ipsum dolor sit</p>3</div>

@layerを使用することで、レイヤーを作成することができます。@layerの後には任意のレイヤーの名前を指定します。

1@layer name {2  3}

以下のようにCSSを記述すると、テキストの色はutilityで指定したgreenになります。後に記述したレイヤー「utility」の方が優先されるためです。

1@layer base {2  p {3    color: black;4  }5}67@layer utility {8  .text {9    color: green;10  }11}

レイヤーを作成するだけでは、記述した順に優先度が決まります。最初に@layer base, utility;と記述すると、レイヤーの順番を先に決めておけます。後に書いた名前のレイヤーほど優先されます。

以下の例では、先ほどとはレイヤーを記述する順番を逆にしていますが、最初に順番を指定しているので、テキストの色はutilityで指定したgreenになります。

1@layer base, utility;23@layer utility {4  .text {5    color: green;6  }7}89@layer base {10  p {11    color: black;12  }13}

ここまでの例では、レイヤーを同じファイル内に作成していましたが、ファイルを分けたいこともあるでしょう。

以下のようにreset.cssとstyle.cssを記述します。@import url(reset.css) layer(reset);では、@importで外部のreset.cssを読み込み、layer()でレイヤーの名前を指定します。こうすることで、外部のCSSを、レイヤーに入れた状態で読み込めます。

@importは、@charsetと、順番を指定する@layerの文を除いて、他のルールより前に書く必要があります。

1p {2  font-size: 30px;3  color: black;4}

1@layer reset, base, utility;23@import url(reset.css) layer(reset);45@layer utility {6  .text {7    color: green;8  }9}1011@layer base {12  .container .text {13    color: red;14  }15}

この指定でも、テキストの色はutilityで指定したgreenになります。

先ほどのコードを見て、1つ気づくことがないでしょうか？カスケードレイヤーがなければ、.textよりも.container .textの方が詳細度が高く、後に記述してもいるので、redになるはずです。しかし、カスケードレイヤーでは、詳細度より先にレイヤーの順番が比べられます。そのため、詳細度に関係なく、後に指定したレイヤーのスタイルが優先されます。

注意点が2つあります。

• レイヤーに入れていないスタイルは、どのレイヤーのスタイルよりも優先されます。既存のCSSの一部だけをレイヤーに入れると、レイヤーに入れなかったスタイルに上書きされます。
• !importantを付けた宣言は、優先順位が逆になります。先に宣言したレイヤーの!importantほど優先され、レイヤーに入れていない!importantよりも、レイヤー内の!importantが優先されます。

• CSS @layer アットルール - CSS | MDN⁠（新しいタブで開く）