CSSの新機能カスケードレイヤー「@layer」CSSをレイヤー化して扱え、今までの実装方法が大きく変わる！

Post on:2022年6月6日

CSSの新機能「@layer」カスケードレイヤー

@layerカスケードレイヤーという新機能がCSSに登場しました！
新しいものがすべてそうであるように、それを本当に理解するには時間がかかります。私もキーボードを叩きながら考えていましたが、正直なところ、まだ完全に理解できてはいません。幸いなことに、賢い人たちが助けてくれます。

この記事はMiriam Suzanneのツイートから影響を受けたもので、彼女はCSSの新しい重要なものに影響を与えています。噂には聞いていましたが、突然ブラウザの実験的機能としてリリースされました。

✨ You can now play with Cascade Layers in two browsers (behind flags):

- Firefox Nightly » about:config » layout.css.cascade-layers.enabled
- Chrome Canary » runtime flag » --enable-blink-features=CSSCascadeLayershttps://t.co/q9KtcKAzxr

— MiAAAAAAAh (is Terrifying) (@TerribleMia) September 9, 2021

カスケードレイヤー（@layer）は2021年10月現在、ブラウザの実験的機能として利用できます。

Firefox Nightly: about:config » layout.css.cascade-layers.enabled
Chrome Canary: runtime flag » --enable-blink-features=CSSCascadeLayers

私はこのカスケードレイヤーについて、非常に単純に考えていました。例えば、2つのCSSファイルをリンクするとします。

<link rel="stylesheet" href="1.css">
<link rel="stylesheet" href="2.css">

1 2	<link rel="stylesheet" href="1.css"> <link rel="stylesheet" href="2.css">

2.cssにあるセレクタは後に記述されているので、1.cssにある同じ詳細度を持つセレクタに勝ちます。CSSレイヤーは記述順を変更することなく、それをコントロールできる方法だと思いました。つまり、リセットされたスタイルシートをどこでロードしても、それを前のレイヤーにキックすることで、詳細度を下げることができるのです。また、オーバーライドするスタイルシートをどこでロードしても、それを上に上げることができます。

こういうことはまだまだ出てくるかもしれませんが、実際にレイヤーというコンセプトは最初に想像していたよりもはるかに強力なものです。

bram.usの記事でカスケードレイヤーについてさらに掘り下げています。

カスケードレイヤー（Cascade Layers）の登場により、デベロッパーはカスケードを制御するためのツールをより多く利用できるようになります。カスケードレイヤーの真の力はカスケード内の位置、つまりセレクタの詳細度とファイルの記述順にあります。そのため、他のレイヤーで使用されているセレクタの詳細度やCSSをレイヤーにロードする記述順を気にする必要がなくなります。これは大規模なチームやサードパーティのCSSをロードする時に非常に役立ちます。

これが問題なのです、どのセレクタが勝つかに影響する今までとは異なる新しいものです。レイヤーは、実際に適用されるスタイルを決定するためのまったく新しい（そして強力な）ものなので、CSS脳を再構築する必要があるでしょう。

カスケードレイヤーは強力！

強力と言ったのは、「より高い」レイヤーはレイヤー内のセレクタが弱い場合でも、文字通り従来の強いセレクタを負かすことができるからです。

Miriamによるデモページで、このことを数行で明らかにしています

/* レイヤーが非レイヤースタイルを上書き */
@layer override {
  h1 {
    color: green;
  }

  h1::before {
    content: "✅ ";
  }
}

/* より高い詳細度にもかかわらず、レイヤー外だと負けます */
#h1 {
  color: red;
}

#h1::before {
  content: "❌ ";
}

/* レイヤーが非レイヤースタイルを上書き */

@layer override {

h1 {

color: green;

}

h1::before {

content: "✅ ";

}

/* より高い詳細度にもかかわらず、レイヤー外だと負けます */

#h1 {

color: red;

}

#h1::before {

content: "❌ ";

}

下のCSS（#h1）はより高い詳細度でもレイヤーに含まれていないので、レイヤー化されている弱いセレクタ（h1）が勝ちます。すごいですね。

しかも、レイヤーは1つに限定されません。好きなように定義して、好きなだけ使用することができます。

@layer reset;     /* resetという名前の最初のレイヤーを作成 */
@layer base;      /* baseという名前の2番目のレイヤーを作成*/
@layer theme;     /* themeという名前の3番目のレイヤーを作成 */
@layer utilities; /* utilitiesという名前の4番目のレイヤーを作成 */
/* @layer reset, base, theme, utilities; と記述することもできます */


@layer reset { /* リセット用のスタイル */
  /* ... */
}

@layer theme { /* テーマ用のスタイル */
  /* ... */
}

@layer base { /* ベース用のスタイル */
  /* ... */
}

@layer utilities { /* ユーティリティ用のスタイル */
  /* ... */
}

@layer reset; /* resetという名前の最初のレイヤーを作成 */

@layer base; /* baseという名前の2番目のレイヤーを作成*/

@layer theme; /* themeという名前の3番目のレイヤーを作成 */

@layer utilities; /* utilitiesという名前の4番目のレイヤーを作成 */

/* @layer reset, base, theme, utilities; と記述することもできます */

@layer reset { /* リセット用のスタイル */

/* ... */

}

@layer theme { /* テーマ用のスタイル */

/* ... */

}

@layer base { /* ベース用のスタイル */

/* ... */

}

@layer utilities { /* ユーティリティ用のスタイル */

/* ... */

}

驚きの連続です！

カスケードレイヤーをどのように使用するのか

よくあるパターンとしては、

レイヤー化されていないCSSリセットは、非常に弱い。
サードパーティのCSSは、低レベルでレイヤー化。
作成したスタイルは、高レベルでレイヤー化。

そして、レイヤーはいつでも増やしたり減らしたりできるので、レイヤーの間に空きを残してもそれほど心配する必要はありません。

時間が解決してくれることもあるでしょう。
これから先、多くの人々がカスケードレイヤーについて興味を持つようになります。

/* 唯一のレイヤーです。ここに入っているものが勝ちます。 */
@layer overrides { 
  /* ... */
}

/* 唯一のレイヤーです。ここに入っているものが勝ちます。 */

@layer overrides {

/* ... */

}

そして、数年後にはこうなるかもしれません、、、😅

@layer final { 
  /* ... */
}
@layer final-final { 
  /* ... */
}
@layer final-final-v2 { 
  /* ... */
}
@layer final-final-final-last-complete { 
  /* ... */
}

@layer final {

/* ... */

}

@layer final-final {

/* ... */

}

@layer final-final-v2 {

/* ... */

}

@layer final-final-final-last-complete {

/* ... */

}

カスケードレイヤーのデバッグ

デベロッパーツールがレイヤーを明確に表現してくれることを願っています。なぜなら、レイヤーの配置によって見た目の悪いセレクタが勝ってしまうと、しばらくの間、頭を悩ませることになるからです。

カスケードレイヤーのサポート状況

カスケードレイヤーのサポート状況は、下記の通りです。
※2022年6月、更新しました。

CSS Cascade Layersのサポートブラウザ

非サポートブラウザにも対応できるようポリフィルもリリースされています。

PostCSS Cascade Layers

アップデート

カスケードレイヤーは2021年10月現在、非常に新しいものなので、仕様が変わる可能性があります。2021年10月6日に、レイヤー化されていないスタイルは最も弱いスタイルではなく、最も強いスタイルであることが決定されたようです。
参考: [css-cascade-5] Reconsider placement of unlayered styles, for better progressive enhancement? #6284

つまり、上記のいくつかが逆になります。