Skip to content

CSS 新機能 Custom Media Queries （@custom-media）導入方法 [PostCSS]

January 18

・css

レスポンシブやダークモードを実装する際に使用するメディアクエリは、Scss の@mixin を使用したり CSS-in-JS であれば utility 関数を作成したりとブレイクポイントの一括管理や記述の簡素化が課題でした。

将来的に CSS の機能として追加される予定の Custom Media Queries（ @custom-media ）を利用するとメディアクエリの一括管理と記述の簡素化が実現できます。

基本的な使い方

@custom-media に続けて Custom Media Queries の名前を宣言し、さらに続けて値を指定します。

コード内で使用する際は @media に続けて宣言した名前を記載します。

/* Custom Media Query の宣言 */
@custom-media --sm (width >= 600px);
@custom-media --md (width >= 900px);

/* 使用方法 */
h1 {
  font-size: 24px;
}

@media (--sm) {
  h1 {
    font-size: 32px;
  }
}

上記の @media の部分は以下のように書くのと同じです。

@media (min-width: 600px) {
  h1 {
    font-size: 32px;
  }
}

PostCSS を使用して Astro に導入する

この機能を今すぐ導入したい場合、PostCSS のプラグインがその機能を提供しています。
ここではAstroへの導入方法を紹介します。

1. パッケージのインストール

postcss-custom-media-generator と依存ライブラリの postcss-preset-env をインストールします。

postcss は Astro が使用している Vite に付属しているためインストールする必要はありません。

npm install postcss-preset-env postcss-custom-media-generator

2. config ファイルを作成

postcss.config.cjs ファイルをプロジェクトディレクトリ直下に作成します。

// postcss.config.cjs

const postcssPresetEnv = require("postcss-preset-env");
const postcssCustomMediaGenerator = require("postcss-custom-media-generator");

module.exports = {
  plugins: [
    postcssCustomMediaGenerator({
      // ここに名前と値を指定する
    }),
    postcssPresetEnv(),
  ],
};

postcssCustomMediaGenerator() は必ず postcssPresetEnv() より前に記述します。

3. Custom Media Queries を作成

2 で作成した config ファイルに続けて Custom Media Queries を追記します。

例えば sm: 600 のように指定した場合、 @custom-media --sm (600px <= width); として使用できるようになります。

// postcss.config.cjs

...

module.exports = {
  plugins: [
    postcssCustomMediaGenerator({
      sm: 600,
      md: 900,
      lg: 1200,
    }),
    postcssPresetEnv(),
  ],
};

実際のコードでの使用方法は基本的な使い方と同じです。

h1 {
  font-size: 24px;
}

@media (--sm) {
  h1 {
    font-size: 32px;
  }
}

範囲の指定

sm: 600 md: 900 のように 2 つ以上指定がある場合は、以下のように使用できるようになります。

@custom-media --sm (600px <= width);
@custom-media --sm-only (600px <= width < 900px);
@custom-media --md (900px <= width);

例えば、 @media (max-width: 599px) を使用したい場合は config ファイルに xs: 0 を追加して、CSS ファイルでは次のように記述します。

@media (--xs-only) {
  /* ウィンドウ幅が599px以下の場合に適用 */
}

CSS の新機能を先取りして Custom Media Queries （@custom-media）が使用できるようになりました 🎉

Astro プロジェクトの pages/ や components/ 内にある .astro の <style> 内でも問題なく機能します。

参照

Tags

how-to react astro