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

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

## 基本的な使い方

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

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

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

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

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

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

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

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

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

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

[postcss-custom-media-generator](https://github.com/jasonraimondi/postcss-custom-media-generator) と依存ライブラリの [postcss-preset-env](https://github.com/csstools/postcss-plugins/tree/main/plugin-packs/postcss-preset-env) をインストールします。

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

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

### 2. config ファイルを作成

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

```jsx
// 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);` として使用できるようになります。

```jsx
// postcss.config.cjs

...

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

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

```css
h1 {
  font-size: 24px;
}

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

### 範囲の指定

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

```css
@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 ファイルでは次のように記述します。

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

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

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

## 参照

- 10 Custom Media Queries | Media Queries Level 5 [https://www.w3.org/TR/mediaqueries-5/#custom-mq](https://www.w3.org/TR/mediaqueries-5/#custom-mq) （2024-01-18 参照）
- No media query variables | State of CSS 2022 | web.dev [https://web.dev/blog/state-of-css-2022#no-media-query-variables](https://web.dev/blog/state-of-css-2022#no-media-query-variables) （2024-01-18 参照）


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

Tags