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

先日の記事(2022年、注目しておきたいCSSの新機能のまとめ)の中でもすぐに使えたら便利な機能の一つが、コンテナクエリです。

コンテナクエリがすべてのモダンブラウザで動作するポリフィルがGoogleからリリースされたので、紹介します。

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

A New Container Query Polyfill That Just Works
by Chris Coyier

今まではメディアクエリを使用していましたが、ビューポートベースのメディアクエリでは限界が見えてきました。そこでコンテナクエリの登場です。コンテナクエリは、親コンテナのサイズに応じて要素のスタイルを設定できます。

たとえば、コンポーネントを1カラムに配置する時と2カラムに配置する時、そしてサイドバーに配置する時それぞれに適したスタイルを与えることができます。詳しくは、以前の記事をご覧ください。

下記は各ポイントを意訳したものです。
※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。

コンテナクエリのポリフィル「Container Query Polyfill」

コンテナクエリのポリフィルが登場し、ポリフィルらしく完璧に動作します。
サポートブラウザは、Chrome/Edge 88+, Firefox 78+, Safari 14+です。

サイトのキャプチャ

Container Query Polyfill -GitHub

「Container Query Polyfill」の特徴

  1. ブラウザがコンテナクエリをサポートしていないことを検出すると、ポリフィルが読み込まれます。
  2. CSSは通常通りに記述し、現在の仕様に準拠したコンテナクエリのCSSを記述します。
  3. 完璧にコンテナクエリが機能します。

コンテナクエリのポリフィルがこれほど使いやすく、しかもGoogleChromeLabsから提供されることは、非常に素晴らしいことです。GoogleのエンジニアであるSurma氏のおかげですね、感謝します!

Jonathan Neal氏によるcqfillというコンテナクエリのポリフィルがこれより前に存在していました。公式に非推奨なのかどうかはわかりませんが、動作させるには非推奨なCSSとPostCSSが必要でしたので、ここで紹介する新しいポリフィルを優先して推奨としたいと思います。

「Container Query Polyfill」の使い方

ポリフィルはわずか1.6kBの軽量で、ResizeObserverMutationObserverを使用してコンテナクエリ機能を実装します。

下記のように記述すると、ブラウザがコンテナクエリをネイティブにサポートしていない場合にのみ、ポリフィルは読み込まれます。

下記のように<script>に記述してもよいのですが、簡単にするには上記の方法が一番良さそうです。

あとはこれで、CSSでコンテナクエリの構文を自由に使用できます。
たとえば、天気予報のウィジェットがあるとします。クエリ用にはラッパー要素が必要です。スタイルを定義したものに対してクエリを発行してはいけないというルールがあります。

ラッパーはコンテナとしてインスタンス化されます。

次に、コンポーネントのグローバルなスタイルと、コンテナクエリでスコープされたスタイルを記述します。

「Container Query Polyfill」のデモ

コンテナクエリで実装された天気予報のウィジェットを見てましょう。
ラッパーの幅が700pxを超えると横並びに配置され、700px以下では縦に配置されます。

See the Pen
Container Query Polyfill Example
by Chris Coyier (@chriscoyier)
on CodePen.

Bramusのブログで初めて見たのですが、彼はこのContainer Query Polyfillを使ったクラシックカードのデモを実装しています。一番上のカードは横並びで(ブラウザのウィンドウが十分広ければ)、その下にレイアウトが異なる同様のカードがコンテナクエリに基づいてより良いフォーマットに変化するのがわかると思います。

See the Pen
CSS Container Queries Demo (+ polyfill)
by Bramus (@bramus)
on CodePen.

「Container Query Polyfill」のブラウザサポート

ドキュメントによると、ポリフィルはResizeObserver, MutationObserver および:is()に依存しています。したがって、すべてのモダンブラウザ、特にChrome/Edge 88+、Firefox 78+、Safari 14+で動作します。

ドキュメントには、サポートするものしないものなど、あらゆる種類の注意事項が網羅されています。私にはほとんどニッチなものに思えます。よく使用する典型的な例はサポートされています。

このポリフィルはゲームチェンジャーになるのか

この記事を書いている間に、コンテナクエリはChromeでフラグでのサポートが確認され、現在は公式の仕様ドラフトになっています。

これは非常にエキサイティングなことで、たとえ途中で構文が少し変わったとしても(すでに何度も変わっています)、ブラウザが実際にコンテナクエリを出荷することを示しています。しかし、もちろん、コンテナクエリがいつ出荷されるかはわかりませんし、flexboxやgridのように安心して使用できるようになるのかもわかりません。

しかし、もしあなたがこのポリフィルに興味を持ち、プログレッシブエンハンスメントに注意を払っているのなら、コンテナクエリを使うのは今がチャンスかもしれません。ポリフィルはわずか2.8kbで、これほど重要なものにしてはかなり軽量サイズです。

このポリフィルによって、コンテナクエリの使用率が上昇すると思います。

FOUC?

スタイルが正しく適用されるのは、JavaScriptファイルがダウンロードされ実行された後であるという事実は、FOUC(Flash of Unstyled Content)の領域へと導きます。デモの動画をご覧ください。レンダリングを意図的に遅らせる以外に、これを回避する方法があるとは思えませんが、これは一般的にダメだと考えられています。Webフォントの読み込みと同様にFOUCは、たとえシフトが理想的でないとしても、コンテンツが隠れたり遅れたりすることがないという意味でおそらく良いことなのでしょう。ブラウザのサポートが開始され、ポリフィルがまったく読み込まれなくなれば、FOUCは解消されるはずです。

このポリフィルで、コンテナクエリを楽しんでください。いろいろなデモを見たいですね。

サイトのキャプチャ

Container Query Polyfill -GitHub

sponsors

top of page

©2022 coliss