LeMoN

Next.jsでContainer Queryを使いたい！

2022.02.01

2022.02.02

TOPICS

Next.jsでContainer Queryを使いたい！

そもそもContainer Queryとは
Next.jsでContainer Queryを使う
PostCSSの導入
実際にCSSで使ってみる
副作用

そもそも`Container Query`とは

Container Queryは名前の通り、親要素の大きさに基づいてスタイルを定義できる。@media screen and (max-width: ○○px) {...はMedia Queryと呼ばれ、Viewportに基づく。しかしながら2022年1月現在、どのブラウザ(フラグ以外)も対応していない。

can i use 'CSS Container Queries'

詳しいContainer Queryの説明や使い方については以下の記事を見ていただきたい。

CSS コンテナクエリの基礎知識と便利な使い方を解説

CSSのコンテナクエリが、Chrome Canaryのフラグで利用できるようになりました。正式なサポートはこれからですが、一足先に、コンテナクエリの基礎知識と便利な使い方を紹介します。メディアクエリ

coliss.com

CSS Container Queries - CSS: Cascading Style Sheets | MDN

When creating a responsive design you often use a media query to change the document layout based on the size of the viewport.

developer.mozilla.org

この先からはContainer Queryの基本的な使い方を習得した人向けとなる。

Next.jsで`Container Query`を使う

まずは伝家の宝刀create-next-appでNext.jsのプロジェクトを作成する。(--tsオプションでTypeScriptをあらかじめ導入する)

npx create-next-app --ts [project name]  
# or
npm -g create-next-app
create-next-app --ts [project name]

PostCSSの導入

対応していないのならばpolyfillで解決しちゃおうということでPostCSSの出番。まず必要なモジュールをインストール。

npm i postcss postcss-nesting cqfill

postcssで様々なPostCSSのプラグインを使えるようになる。

postcss-nestingはCSSをネストさせて書くためのモジュール。()

cqfillはContainer QueryのPolyfill。同様のPolyfillのなかでGoogle Chrome Labsの次にメンテナンスがされている。

touch post.config.json # post.config.jsでも良い

でPostCSSの設定用ファイルを作成。

{
    "plugins": ["postcss-nesting", "cqfill/postcss"],
}
post.config.json

cqfillを有効化させるため、pages/_app.tsxに記述を追加する。

// ...
import 'cqfill';
// ...
pages/_app.tsx

ドキュメントにも書いてある通り、Next.js側の仕様で自分でPostCSSを設定するとデフォルトのPostCSS設定が初期化される。

Warning: When you define a custom PostCSS configuration file, Next.js completely disables the default behavior...

Advanced Features: Customizing PostCSS Config | Next.js

Extend the PostCSS config and plugins added by Next.js with your own.

nextjs.org

そのためautoprefixerなどのNext.jsがデフォルトで提供しているPostCSS設定をしたい場合は、手動での記述が必要となる。

実際にCSSで使ってみる

今回、このような場合のHTMLを考える。

// ...
<div className={`${styles.card} ${container.parent}`}>
    <div className={container.child}>
    <h2>Container Query</h2>
    <p>You can resize this element</p>
    </div>
</div>
// ...
index.tsx

.parent {
    contain: layout inline-size;
}
.child {
    color: blue;

    @container (width >= 500px) {
        color: red;
    }
    /* or */
    @container (min-width: 500px) {
        color: red;
    }
}
Container.module.css