カスケードレイヤー「@layer」でCSSの実装がどう変わるのか、仕組みと基礎知識、さまざまな使用例を徹底解説

CSSの新機能「カスケードレイヤー」がいよいよ主要ブラウザすべてにサポートされます。Firefox 97（先月リリース）とChrome 99（3/1リリース）でサポートされ、そしてSafariでは次期バージョンでサポートされる予定です。 カスケードレイヤー@layerを使用すると、CSSの詳細度とスタイルの順番をカスケード内で明示的にレイヤー化（階層化）でき、これまでのCSSの実装方法が大きく変わります。 カスケードレイヤーの仕組みと基礎知識、さまざまな使用例を紹介します。 Hello, CSS Cascade Layers by Ahmad Shadeed CSSのカスケードレイヤーについて知識を得たい人は、下記の記事もお勧めします。 CSSの新機能カスケードレイヤー「@layer」CSSをレイヤー化して扱え、今までの実装方法が大きく変わる！ CSSの新機能カスケードレイヤーが主要ブラウ

[coliss]

CSSカスケードレイヤーの仕組みと基礎知識、さまざまな使用例。

[sippo_des]

カスケードなのにレイヤーか、、コンフリクトがアフレイドよ

[spark7]

詳細度を使った優先度に慣れてると思わぬところで引っかかりそうだな

[yarumato]

“@layerを使用すると、CSSの実装方法が大きく変わります。Firefox 97（2022-02）とChrome 99（2022-03）でサポートされ、Safariは次期バージョン予定”

[hogashi]

便利そう

[persee]

主要ブラウザ全てやったー！ってEdgeは違うのかーいそうかいそうかい

[hotmilkcocoa]

めんどくさそうだからまともに追ってなかったけどわかりやすい。暗黙のルールで整理するよりは @layer で整理したほうがマシそう

[ultimatebreak]

CSSはまず標準でネスト構文使えるようにだな

[kachikachi2]

レイヤー名をバージョン数とか日付とかにして都度都度最上位に追加していく、秘伝のタレみたいな運用方法しか思いつかない

[mayumayu_nimolove]

今のと変える必要あるの？

[kvx]

はやく普及してー

[ustam]

CSSの仕組みを理解していないエンジニアによる詳細度上書き地獄とか消滅してほしい。edgeは対応していないようだけど、対応ブラウザ以外では当然エラー？

[Fushihara]

なんか新しい地獄が開くだけにしか見えんのだが。