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

Post on:2022年1月19日

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

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

Container Query Polyfill -GitHub

「Container Query Polyfill」の特徴

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

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

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

「Container Query Polyfill」の使い方

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

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

const supportsContainerQueries = "container" in document.documentElement.style;

if (!supportsContainerQueries) {
  import("https://cdn.skypack.dev/container-query-polyfill");
}

const supportsContainerQueries = "container" in document.documentElement.style;

if (!supportsContainerQueries) {

import("https://cdn.skypack.dev/container-query-polyfill");

}

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

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

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

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

<div class="weather-wrap">
  <dl class="weather">
    <div>
      <dt>Sunday</dt>
      <dd>
        <b>26°</b> 7°
      </dd>
    </div>
    <div>
      <dt>Monday</dt>
      <dd>
        <b>34°</b> 11°
      </dd>
    </div>
    <!-- etc -->
  </dl>
</div>

<div>

<dt>Sunday</dt>

<dd>

<b>26°</b> 7°

</dd>

</div>

<div>

<dt>Monday</dt>

<dd>

<b>34°</b> 11°

</dd>

</div>

</dl>

</div>

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

.weather-wrap {
  container: inline-size / weather-wrapper;
  /* containerはショートハンド */
  /* container-type: inline-size; */
  /* container-name: weather-wrapper; */

  /* テスト用に、デスクトップ上でリサイズハンドルを取得するために、下記を定義 */
  /* resize: both; */
  /* overflow: hidden; */
}

.weather-wrap {

container: inline-size / weather-wrapper;

/* containerはショートハンド */

/* container-type: inline-size; */

/* container-name: weather-wrapper; */

/* テスト用に、デスクトップ上でリサイズハンドルを取得するために、下記を定義 */

/* resize: both; */

/* overflow: hidden; */

}

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

.weather {
  display: flex;
}
@container weather-wrapper size(max-width: 700px) {
  .weather {
    flex-direction: column;
  }
}

.weather {

display: flex;

}

@container weather-wrapper size(max-width: 700px) {

.weather {

flex-direction: column;

}

「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でフラグでのサポートが確認され、現在は公式の仕様ドラフトになっています。

Today's CSSWG call:

🥳 First Public Working Draft of Contain Level 3 (container queries)
🥳 FPWD of Cascade Level 6 (scope)

This means the proposals have graduated to being official work-in-progress specifications. Still a lot to do before browsers ship, but it's a big step!

— Mia, on Bass (@TerribleMia) December 8, 2021

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

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

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

FOUC?

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

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

Container Query Polyfill -GitHub