on:2022年1月19日sponsors先日の記事(2022年、注目しておきたいCSSの新機能のまとめ)の中でもすぐに使えたら便利な機能の一つが、コンテナクエリです。コンテナクエリがすべてのモダンブラウザで動作するポリフィルがGoogleからリリースされたので、紹介します。Coyier今まではメディアクエリを使用していましたが、ビューポートベースのメディアクエリでは限界が見えてきました。そこでコンテナクエリの登場です。コンテナクエリは、親コンテナのサイズに応じて要素のスタイルを設定できます。コンポーネントを1カラムに配置する時と2カラムに配置する時、そしてサイドバーに配置する時それぞれに適したスタイルを与えることができます。詳しくは、以前の記事をご覧ください。コンテナクエリの基礎知識と便利な使い方を解説CSSコンテナクエリの登場で、デザインのやり方も考え方も大きく変わる下記は各ポイントを意訳したものです。※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。Polyfill」コンテナクエリのポリフィルが登場し、ポリフィルらしく完璧に動作します。Polyfill」の特徴ブラウザがコンテナクエリをサポートしていないことを検出すると、ポリフィルが読み込まれます。CSSは通常通りに記述し、現在の仕様に準拠したコンテナクエリのCSSを記述します。完璧にコンテナクエリが機能します。コンテナクエリのポリフィルがこれほど使いやすく、しかもGoogleChromeLabsから提供されることは、非常に素晴らしいことです。Neal氏によるcqfillというコンテナクエリのポリフィルがこれより前に存在していました。公式に非推奨なのかどうかはわかりませんが、動作させるには非推奨なCSSとPostCSSが必要でしたので、ここで紹介する新しいポリフィルを優先して推奨としたいと思います。Polyfill」の使い方ポリフィルはわずか1.6kBの軽量で、ResizeObserverとMutationObserverを使用してコンテナクエリ機能を実装します。下記のように記述すると、ブラウザがコンテナクエリをネイティブにサポートしていない場合にのみ、ポリフィルは読み込まれます。{import("https://cdn.skypack.dev/container-query-polyfill");}下記のように<script>に記述してもよいのですが、簡単にするには上記の方法が一番良さそうです。src="https://unpkg.com/container-query-polyfill/cqfill.iife.min.js"></script>あとはこれで、CSSでコンテナクエリの構文を自由に使用できます。天気予報のウィジェットがあるとします。クエリ用にはラッパー要素が必要です。スタイルを定義したものに対してクエリを発行してはいけないというルールがあります。--></dl></div>ラッパーはコンテナとしてインスタンス化されます。*/}次に、コンポーネントのグローバルなスタイルと、コンテナクエリでスコープされたスタイルを記述します。Polyfill」のデモコンテナクエリで実装された天気予報のウィジェットを見てましょう。ラッパーの幅が700pxを超えると横並びに配置され、700px以下では縦に配置されます。Polyfillを使ったクラシックカードのデモを実装しています。上のカードは横並びで(ブラウザのウィンドウが十分広ければ)、その下にレイアウトが異なる同様のカードがコンテナクエリに基づいてより良いフォーマットに変化するのがわかると思います。:is()に依存しています。ドキュメントには、サポートするものしないものなど、あらゆる種類の注意事項が網羅されています。私にはほとんどニッチなものに思えます。使用する典型的な例はサポートされています。このポリフィルはゲームチェンジャーになるのかこの記事を書いている間に、コンテナクエリはChromeでフラグでのサポートが確認され、現在は公式の仕様ドラフトになっています。2021これは非常にエキサイティングなことで、たとえ途中で構文が少し変わったとしても(すでに何度も変わっています)、ブラウザが実際にコンテナクエリを出荷することを示しています。コンテナクエリがいつ出荷されるかはわかりませんし、flexboxやgridのように安心して使用できるようになるのかもわかりません。あなたがこのポリフィルに興味を持ち、プログレッシブエンハンスメントに注意を払っているのなら、コンテナクエリを使うのは今がチャンスかもしれません。ポリフィルはわずか2.8kbで、これほど重要なものにしてはかなり軽量サイズです。このポリフィルによって、コンテナクエリの使用率が上昇すると思います。Content)の領域へと導きます。デモの動画をご覧ください。レンダリングを意図的に遅らせる以外に、これを回避する方法があるとは思えませんが、これは一般的にダメだと考えられています。Webフォントの読み込みと同様にFOUCは、たとえシフトが理想的でないとしても、コンテンツが隠れたり遅れたりすることがないという意味でおそらく良いことなのでしょう。ブラウザのサポートが開始され、ポリフィルがまったく読み込まれなくなれば、FOUCは解消されるはずです。このポリフィルで、コンテナクエリを楽しんでください。いろいろなデモを見たいですね。