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月現在、どのブラウザ(フラグ以外)も対応していない。
詳しいContainer Query
の説明や使い方については以下の記事を見ていただきたい。
この先からは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...
そのため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
これで親要素が500px
以上であれば、子要素のcolor
がred
になる。
副作用
何故だかposition: fixed
が効かなくなる。原因究明中で、分かり次第追記しようと考えている。
動かないよ!って方へ
cqfill
のVersionを最新の0.6.1
から0.6.0
に変えてみると良い。公式のGithubではタグが消されているがインストールでき、使用できる。