https://blog.jxck.io/entries/2023-01-07/new-css-capabilities-for-component.html
自分用メモとして、簡単にまとめてみる。
@scope
CSS にスコープを入れるらしい。
まだ作業中のようだが、記事中にも触れられているように大きく変化する機能だと思うので、個人的にかなり動向が気になる。
Links
@layer
@layer は CSS のアットルールで、カスケードレイヤーを宣言します。カスケードレイヤー内のルールは一緒にカスケードされるため、ウェブ開発者はカスケードをより自由に制御することができます。
https://developer.mozilla.org/ja/docs/Web/CSS/@layer
新しいCSSを適用する単位みたいなイメージかな。
レイヤーは適用順位が高いようなので、うまく活用していきたいな。
https://coliss.com/articles/build-websites/operation/css/css-cascade-layers.html より
Nesting
SCSS のような、ネストした CSS の記法が導入を検討しているらしい。
現在投票中みたいなので、私も投票しておいた。
- https://developer.chrome.com/blog/help-css-nesting/
- https://webkit.org/blog/13607/help-choose-from-options-for-css-nesting-syntax/
- こちらは以前別の機会で投票したのでメモ
has()
子要素に応じて変化させるセレクタ。
パフォーマンスの問題でなかなか進んでいなかったらしい。
子要素全てを探索しないといけないので容易に想像はできる。
あると嬉しいが、根本的にパフォーマンスの課題はついて回りそうだし、計画的に使わないと訳が分からなくなりそうなので、あまり使わないほうが良いかもしれない。
Container Query
親要素のサイズに応じてスタイルなどを変更できる。
従来の @media は画面サイズに応じてしか対応できなかった。
Links
Style Query
Container Query は親要素のサイズに対する指定に対し、Style Query は親要素に対してスタイルなどを変更できる仕様らしい。
従来の CSS はそうしたバリエーションはコンテナ側が全て定義してカスケードするのが基本だったが、クエリによって反映できることはコンポーネントが自我を持ってカプセル化できることを意味する。意味はするが、これは依存の方向に関わる重要な問題なので、できればそれで嬉しいものかというと一概には言えないだろう。
https://blog.jxck.io/entries/2023-01-07/new-css-capabilities-for-component.html#style-query
記事内にもこうあるが、概ね同意で実装されてもあまり使わない、少なくとも乱用は避けたほうが良いような予感がしている。