CSSコンテナクエリがFirefoxでリリース予定！全モダンブラウザで使用可能へ。
これまでのコンテナクエリの各ブラウザサポート状況
以前の記事でも描いたのですが、viewportではなくコンテナのサイズに基づいて要素にスタイルを適用できるCSS Container Queryという便利なcssが待たれていました。
これらはChromeはver105、Safariはver16、Edgeはver105で既にリリース済みでしたが、Firefoxだけ中々サポートされていませんでした。
ついにFirefoxでリリース予定へ
先ほど読んだ記事によると、ついにFirefoxでもコンテナクエリがサポートされるようです。
すでに開発者向けのFirefox Nightly ver109ではリリース済みです。
mozilla connectの質問ページでも以下のような回答がありましたので、問題なければ早くて2023/1/17にはFirefoxに実装リリースされるかもしれません。
The current regular release is Firefox 108; Firefox 109 is in beta testing. Firefox 109 should be released on January 17, 2023, barring any fatal problems that delay it.
なおCanIUseサイトだと CSS property: container のFirefoxリリースがver110になっているので、タイミングやversionは若干前後するかもしれません。
CanIUse > container
コンテナクエリ用のサイズ単位
コンテナクエリには専用の縦横サイズを表す単位があります。
この部分は新しく学習が必要になりそうです。
- cqw: コンテナクエリのwidthの1%
- cqh: コンテナクエリのheightの1%
- cqi: コンテナクエリのinlineサイズの1%
- cqb: コンテナクエリのblockサイズの1%
- cqmin: cqi と cqb で小さい方の値
- cqmax: cqi と cqb で大きい方の値
MDN > CSS Container Queries > Container query length units
まとめ
近日中にはモダンブラウザ全てでコンテナクエリが使えると期待できそうですね。
これでviewportベースのmedia query制御だけでなく親コンテナに応じたレイアウト指定が可能になります。例えばレスポンシブレイアウトの中サイズで、複数の回り込みの折り返しと一覧内の一行の様素数が複雑に被った際の制御がよりシンプルにできそうです。
余談ですが擬似クラス:has()はまだFirefoxでサポート対象予定にすら入っていません。こちらもmozillaにはサポートを期待したいですね。
Discussion