ブラウザ対応まで待てない！CSS コンテナクエリ（@container）の polyfill 適用について

コンテナクエリのプロトタイプが利用できるようになって、マークアップエンジニア界隈は大きな注目を集める一方で、 Chrome Canary でフラグを有効にしなければ機能しない対応状況が、いまひとつ現場に熱をもたらさない要因となっている。

CSS に関心がある、あなたにおかれても「いつコンテナクエリを使えるのだろう」と首を長くして待たれていたことだろう。そんななか GitHub の GoogleChromeLabs アカウントからコンテナクエリの polyfill が公開された。

このエントリーでは、Container Query Polyfill について紹介したい。

CSS コンテナクエリとは

CSS コンテナクエリは、対象の親コンテナのサイズに応じてスタイルを適用するためのものだ。

サイズに応じてスタイルを定義する現行の手段といえば、CSS メディアクエリ（@media）が用いられ、ビューポートを基に切り替えている。しかし、このアプローチでは制限があるとして、CSS コンテナクエリ（@container）が登場したと思われる。

たとえばサイドカラム内のコンテンツなどは、ビューポートを基にするより、親コンテナであるサイドカラムのサイズに基づいてスタイル定義したほうがスマートになる好例じゃないだろうか。

モジュラーな設計が求められる昨今のフロント開発にマッチするとして期待されている。

Container Query Polyfill を適用しよう

それでは、CSS コンテナクエリ用 polyfill の container-query-polyfill を適用してみよう。

使い方

ES modules に準拠したセットアップならば、以下のコードで Polyfill を適用できる。

import に際して、パッケージがインストールされている必要があるから、事前に yarn add container-query-polyfill などで用意しておこう。

const supportsContainerQueries = "container" in document.documentElement.style;
if (!supportsContainerQueries) {
  import("container-query-polyfill");
}

従来の読み込みが求められるセットアップならば、以下のコードで Polyfill を適用できる。

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

要件的に、CDNサービスから読み込めないならば、container-query-polyfill リポジトリを git clone するなりダウンロードするなどしてから yarn build して、生成された cqfill.iife.min.js を使うといい。

ブラウザのサポート

Container Query Polyfill が機能するブラウザは、Chrome 88+, Firefox 78+, Safari 14+ で、最新のすべてのブラウザとされている。

Polyfill 内部で、ResizeObserver や MutationObserver を用いているためサポートブラウザが制限されるのはやむを得ないことなのだろう。

CSS コンテナクエリを使うために導入する Polyfill でブラウザ対応状況を気にしなければならないとは、おかしな話だけれど、表示要件がモダンブラウザとするならば問題なく使えるはずだ。

まとめ

CSS コンテナクエリの Polyfill（container-query-polyfill）の紹介だった。

もともと CSS コンテナクエリには興味があったけれど、ブラウザ対応状況で見合わせていたのならば、これを機会に触れてみてはいかがだろう。最近のおよそ完成していた CSS 設計に新しい風を吹き込むことができるかもしれない。

またこのたびの Polyfill は、GoogleChromeLabs によるものだったが、それ以前にも、いくつか散見された。もしそのいずれかを使っていて正常に機能しているならば、わざわざ container-query-polyfill にする必要もない。

ただ Polyfill によっては、制限事項が設けられているから、使い勝手が悪ければ見直しても良さそうだ。

このエントリーが、あなたのクリエイティビティを刺激するものであると期待したい。