on:2022年6月6日sponsors当ブログではCSSの新機能をたくさん紹介してきましたが、今回紹介するのはこれまでのCSSの実装方法が大きく変わるものです。カスケードレイヤー@layerを使用すると、CSSの詳細度とスタイルの順序をカスケード内で明示的にレイヤー化(階層化)できます。CSSのオーバーライド、リセットやサードパーティの外部CSSファイルの扱いが、今までよりはるかに楽になります。できたてほやほやの新機能ですが、主要ブラウザがエバーグリーンブラウザ(最新版に自動アップデートするブラウザ)になった現在、いつの間にかすべてのブラウザにサポートされているかもしれません。Coyier下記は各ポイントを意訳したものです。※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。【訳者注】最後の一文まで、必ず目を通してください。現在の状況に合わせて更新しました。CSSの新機能「@layer」カスケードレイヤーカスケードレイヤーをどのように使用するのかカスケードレイヤーのデバッグカスケードレイヤーのサポート状況アップデートCSSの新機能「@layer」カスケードレイヤー@layerカスケードレイヤーという新機能がCSSに登場しました!新しいものがすべてそうであるように、それを本当に理解するには時間がかかります。私もキーボードを叩きながら考えていましたが、正直なところ、まだ完全に理解できてはいません。幸いなことに、賢い人たちが助けてくれます。Suzanneのツイートから影響を受けたもので、彼女はCSSの新しい重要なものに影響を与えています。噂には聞いていましたが、突然ブラウザの実験的機能としてリリースされました。2021カスケードレイヤー(@layer)は2021年10月現在、ブラウザの実験的機能として利用できます。--enable-blink-features=CSSCascadeLayers私はこのカスケードレイヤーについて、非常に単純に考えていました。2つのCSSファイルをリンクするとします。href="2.css">2.cssにあるセレクタは後に記述されているので、1.cssにある同じ詳細度を持つセレクタに勝ちます。CSSレイヤーは記述順を変更することなく、それをコントロールできる方法だと思いました。リセットされたスタイルシートをどこでロードしても、それを前のレイヤーにキックすることで、詳細度を下げることができるのです。オーバーライドするスタイルシートをどこでロードしても、それを上に上げることができます。いうことはまだまだ出てくるかもしれませんが、実際にレイヤーというコンセプトは最初に想像していたよりもはるかに強力なものです。bram.usの記事でカスケードレイヤーについてさらに掘り下げています。Layers)の登場により、デベロッパーはカスケードを制御するためのツールをより多く利用できるようになります。カスケードレイヤーの真の力はカスケード内の位置、つまりセレクタの詳細度とファイルの記述順にあります。そのため、他のレイヤーで使用されているセレクタの詳細度やCSSをレイヤーにロードする記述順を気にする必要がなくなります。これは大規模なチームやサードパーティのCSSをロードする時に非常に役立ちます。これが問題なのです、どのセレクタが勝つかに影響する今までとは異なる新しいものです。レイヤーは、実際に適用されるスタイルを決定するためのまったく新しい(そして強力な)ものなので、CSS脳を再構築する必要があるでしょう。カスケードレイヤーは強力!強力と言ったのは、「より高い」レイヤーはレイヤー内のセレクタが弱い場合でも、文字通り従来の強いセレクタを負かすことができるからです。";}下のCSS(#h1)はより高い詳細度でもレイヤーに含まれていないので、レイヤー化されている弱いセレクタ(h1)が勝ちます。レイヤーは1つに限定されません。好きなように定義して、好きなだけ使用することができます。*/}驚きの連続です!カスケードレイヤーをどのように使用するのかよくあるパターンとしては、レイヤー化されていないCSSリセットは、非常に弱い。サードパーティのCSSは、低レベルでレイヤー化。作成したスタイルは、高レベルでレイヤー化。レイヤーはいつでも増やしたり減らしたりできるので、レイヤーの間に空きを残してもそれほど心配する必要はありません。時間が解決してくれることもあるでしょう。これから先、多くの人々がカスケードレイヤーについて興味を持つようになります。ここに入っているものが勝ちます。ここに入っているものが勝ちます。*/}カスケードレイヤーのデバッグデベロッパーツールがレイヤーを明確に表現してくれることを願っています。レイヤーの配置によって見た目の悪いセレクタが勝ってしまうと、しばらくの間、頭を悩ませることになるからです。カスケードレイヤーのサポート状況カスケードレイヤーのサポート状況は、下記の通りです。※2022年6月、更新しました。Layersのサポートブラウザ非サポートブラウザにも対応できるようポリフィルもリリースされています。Layersアップデートカスケードレイヤーは2021年10月現在、非常に新しいものなので、仕様が変わる可能性があります。2021年10月6日に、レイヤー化されていないスタイルは最も弱いスタイルではなく、最も強いスタイルであることが決定されたようです。#6284つまり、上記のいくつかが逆になります。