カスケードレイヤー@layerがモダンブラウザでサポートされたとはいえ、互換性の問題から、実際に現場で見かけるのは、まだまだ未来の話と思っていました。ふと、思い立ってCan I use... Support tables for HTML5, CSS3, etcを確認してみたところ、現時点(2022.12.27)でも、すでにGlobalで9割近くサポートされています。これは来年あたりから見かける機会が増えそうだと思ったので、そろそろカスケードレイヤーと向き合いたいと思います。 カスケードレイヤー@layer カスケードレイヤーはスタイルの優先順位を制御するためアルゴリズムの1つです。カスケードレイヤーを使用することで、スタイルの優先順位をレイヤー化(階層化)して管理することができます。とりわけ覚えておかなければならないのは、カスケードアルゴリズムは詳細度アルゴリズムよりも優先されるというこ
![そろそろカスケードレイヤー(@layer)と向き合う](https://cdn-ak-scissors.b.st-hatena.com/image/square/dc8a47a8785a143daa00eee2670a1d006df4591e/height=288;version=1;width=512/https%3A%2F%2Fres.cloudinary.com%2Fzenn%2Fimage%2Fupload%2Fs--bxBUo3QO--%2Fc_fit%252Cg_north_west%252Cl_text%3Anotosansjp-medium.otf_55%3A%2525E3%252581%25259D%2525E3%252582%25258D%2525E3%252581%25259D%2525E3%252582%25258D%2525E3%252582%2525AB%2525E3%252582%2525B9%2525E3%252582%2525B1%2525E3%252583%2525BC%2525E3%252583%252589%2525E3%252583%2525AC%2525E3%252582%2525A4%2525E3%252583%2525A4%2525E3%252583%2525BC%252528%252540layer%252529%2525E3%252581%2525A8%2525E5%252590%252591%2525E3%252581%25258D%2525E5%252590%252588%2525E3%252581%252586%252Cw_1010%252Cx_90%252Cy_100%2Fg_south_west%252Cl_text%3Anotosansjp-medium.otf_37%3AYEND%252Cx_203%252Cy_98%2Fg_south_west%252Ch_90%252Cl_fetch%3AaHR0cHM6Ly9zdG9yYWdlLmdvb2dsZWFwaXMuY29tL3plbm4tdXNlci11cGxvYWQvYXZhdGFyLzQ3YWE3YTVlZTIuanBlZw%3D%3D%252Cr_max%252Cw_90%252Cx_87%252Cy_72%2Fog-base.png)