コンテナクエリのポリフィルについて

コンテナクエリのポリフィルが公開された

ブラウザ幅ではなく親要素の幅に併せて分岐する「コンテナクエリ」ですが、現時点(2022年2月)ではまだ各種ブラウザに正式実装されていません。
「将来的にこういう事が出来る予定ですよ」という状態が続いていましたが、先日モダンブラウザで動作させるためのポリフィルが公開されました。

A New Container Query Polyfill That Just Works

CSSの新機能コンテナクエリのポリフィルがこれほど使いやすく、Googleから提供されたことは素晴らしい

サポートブラウザは、Chrome/Edge 88+, Firefox 78+, Safari 14+となっています。ありがたいことですね。

CDNで使用する場合はこの1行を追加しておきましょう。

<script src="https://unpkg.com/container-query-polyfill/cqfill.iife.min.js"></script>

動作例

前述の記事にあるように、実際の動作はこういった形になります。

画面を縮めていって、画面幅が700pxを切るとメニューが縦に並びます。
メディアクエリでよくやる対応ですが、ここで判定されているのが画面幅ではなく、親要素部分になっています。
※結果的に同じような動作になっています

どういった時に便利なのか

2カラムレイアウトが画面幅縮小で1カラムになるとき、一時的に2カラムの時よりレイアウトが広がる
ドロワーメニューなど、画面幅と関係なくコンテンツ幅が変わる
閲覧者によって画面レイアウトを操作する

※わかり易い例
https://zenn.dev/steelydylan/articles/container-queries

複雑なレイアウトを考えていくと、だんだんと記述に例外処理が増えていってしまい、それらが積もり積もってコードの管理コストを上げてしまいます。
コンテナクエリを活用すれば、画面幅に関係なく「広いところでは広いレイアウト、狭いところでは狭いレイアウト」というのをシンプルに実装できます。

まとめ

コンテナクエリも記述のひとつであり、利用することで劇的に効率が上がるものではありません。
それでも、今まで一つしか選択肢がなかったようなところに、新たな選択肢が加わることは、改善の可能性が生まれることに繋がります。
こういったことの積み重ねで、少しずつ確実に品質を上げていきたいものだなぁ、と考えております。