当ブログではCSSの新機能をたくさん紹介してきましたが、今回紹介するのはこれまでのCSSの実装方法が大きく変わるものです。 カスケードレイヤー@layerを使用すると、CSSの詳細度とスタイルの順序をカスケード内で明示的にレイヤー化（階層化）できます。

CSSの新機能「カスケードレイヤー」がいよいよ主要ブラウザすべてにサポートされます。Firefox 97（先月リリース）とChrome 99（3/1リリース）でサポートされ、そしてSafariでは次期バージョンでサポートされる予定です。 カスケードレイヤー@layerを使用すると ...

こんにちは！ サイボウズ フロントエンドエキスパートチームの麦島です。 CSS Modern Features、最終回となる今回のテーマはCascade Sorting Orderです。 CSS適用順序を構成する仕様の増加 突然ですが、 「⁠CSSの適用順序」 と言われると、どこまで説明できるでしょうか ...

こんにちは！ サイボウズ フロントエンドエキスパートチームの麦島です。 今回取り上げるCSSの機能はCascade Layersです。 Cascade Layersは、 「⁠レイヤー」 と呼ばれる階層を独自に定義することで、CSS適用の優先順位をコントロールする機能です。利用時は@layer ...

CSS の Cascading に Layers という概念が追加された。 これまでのカスケードのソート順序は以下の判定基準に基づいてソートされていた（後述の方が優先される）。 出自と重要度（Origin and Importance） 文脈（Context） 要素に付されたスタイル（Element-Attached Styles ...

米Googleは2月3日（現地時間）、「Google Chrome 99」のベータ版に追加された新機能を発表した。「Chrome 99」では、CSSカスケードレイヤー（CSS Cascade Layers）と、入力要素のピッカーをコードで呼び出す機能が新たにサポートされる。 CSSカスケードレイヤー CSS ...

「Chrome 99」における変更点は、開発者向けの改善が中心。なかでもCSSカスケードレイヤー（CSS Cascade Layers）が導入された点には注目で、今後のCSS設計が大きく変わる可能性がある。

ブラウザーには、任意の文書に既定のスタイルを提供する基本的なスタイルシートがあります。これらのスタイルシートには**ユーザーエージェントスタイルシート**と呼ばれています。実際のスタイルシートを使用するブラウザーもあれば、コードでシミュレートするブラウザーもありますが ...