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

当ブログではCSSの新機能をたくさん紹介してきましたが、今回紹介するのはこれまでのCSSの実装方法が大きく変わるものです。

カスケードレイヤー@layerを使用すると、CSSの詳細度とスタイルの順序をカスケード内で明示的にレイヤー化(階層化)できます。CSSのオーバーライド、リセットやサードパーティの外部CSSファイルの扱いが、今までよりはるかに楽になります。

できたてほやほやの新機能ですが、主要ブラウザがエバーグリーンブラウザ(最新版に自動アップデートするブラウザ)になった現在、いつの間にかすべてのブラウザにサポートされているかもしれません。

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

Cascade Layers?
by Chris Coyier

下記は各ポイントを意訳したものです。
※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。

【訳者注】最後の一文まで、必ず目を通してください。
【更新】2022/6: 現在の状況に合わせて更新しました。

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

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

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

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

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

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

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

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

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

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

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

カスケードレイヤー

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

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

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

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

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

驚きの連続です!

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

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

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

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

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

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

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

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

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

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

サイトのキャプチャ

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

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

アップデート

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

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

sponsors

top of page

©2024 coliss