CSS if()関数を使った条件付きスタイリング

CSS条件付きスタイリングは従来、メディアクエリ、コンテナクエリ、およびカスタムプロパティの回避策に依存してきました。新しいCSS if()関数は、プロパティ値に直接インライン条件ロジックを導入することで、この状況を変えています。2025年8月現在、この機能はChrome 137+、Edge 137+、Chrome for Android、およびAndroid Browserで利用可能であり、開発者により洗練された動的スタイリングのアプローチを提供しています。

この記事では、if()関数の構文、3つのクエリタイプ、および現代のCSS開発において必須ツールとなりつつある理由を示す実用的なアプリケーションについて探求します。

CSS if()関数の構文理解

CSS if()関数は、他のCSS関数とは異なる特定のパターンに従います：

property: if(condition: value; else: fallback);

条件-値ペアを区切るのは、他のCSS関数のようなカンマではなく、セミコロンであることに注意してください。複数の条件を連鎖させることも可能です：

property: if(
  condition-1: value-1;
  condition-2: value-2;
  condition-3: value-3;
  else: fallback
);

この関数では、ifと開き括弧の間にスペースを入れる必要はありません。この厳密な構文により、CSSパーサーが単一の関数呼び出し内の複数の条件を区別できます。

3つのタイプの条件クエリ

style()クエリ

style()クエリは、現在の要素のカスタムプロパティ値をチェックします：

.button {
  background: if(
    style(--variant: primary): #0066cc;
    else: transparent
  );
}

コンテナスタイルクエリとは異なり、if()内のstyle()は親コンテナを必要とせず、スタイルが適用される要素に直接適用されます。

media()クエリ

メディアクエリがインラインで動作し、別のルールブロックの必要性を排除します：

.nav-item {
  padding: if(
    media(min-width: 768px): 16px 24px;
    else: 8px 12px
  );
}

supports()クエリ

プロパティ値内で直接CSS機能サポートをテストします：

.container {
  display: if(
    supports(display: grid): grid;
    else: flex
  );
}

実世界の例：適応型ボタンサイズ

ユーザーの入力方法に基づいてサイズを適応させるボタンを作成してみましょう。これは一般的なアクセシビリティ要件です：

button {
  /* 粗いポインタ用のタッチフレンドリーサイズ */
  width: if(media(any-pointer: coarse): 44px; else: 30px);
  height: if(media(any-pointer: coarse): 44px; else: 30px);
  
  /* それに応じてパディングを調整 */
  padding: if(
    media(any-pointer: coarse): 12px 16px;
    else: 8px 12px
  );
  
  /* 一貫したスタイリングを維持 */
  border-radius: 6px;
  transition: all 0.2s ease;
}

このアプローチにより、すべてのレスポンシブロジックが各プロパティとインラインで保持され、ルールブロック間を移動することなく、コンポーネントの動作が即座に明確になります。

条件付きスタイリングによるテーマ切り替え

デザインシステムは多くの場合、複数のテーマを必要とします。if()関数はこのパターンに優れています：

:root {
  --theme: ocean; /* またはforestやsunset */
}

.card {
  background: if(
    style(--theme: ocean): #e3f2fd;
    style(--theme: forest): #e8f5e9;
    style(--theme: sunset): #fff3e0;
    else: #ffffff
  );
  
  color: if(
    style(--theme: ocean): #0d47a1;
    style(--theme: forest): #1b5e20;
    style(--theme: sunset): #e65100;
    else: #333333
  );
  
  border: 2px solid if(
    style(--theme: ocean): #1976d2;
    style(--theme: forest): #388e3c;
    style(--theme: sunset): #f57c00;
    else: #cccccc
  );
}

テーマを切り替えるには、単純にカスタムプロパティを更新します：

.ocean-theme { --theme: ocean; }
.forest-theme { --theme: forest; }
.sunset-theme { --theme: sunset; }

if()と従来のアプローチの比較

if()関数は、既存の条件付きCSSパターンに対して以下の利点を提供します：

メディアクエリとの比較：

• ルールブロック全体に散らばるのではなく、ロジックをインラインで保持
• コードの重複を削減
• コンポーネントの動作をより透明にする

カスタムプロパティトグルとの比較：

• より読みやすく明示的
• 複雑なcalc()回避策が不要
• 自己文書化されたコード

コンテナスタイルクエリとの比較：

• 親の依存関係なしに要素に直接適用
• 単一プロパティ条件のためのよりシンプルな構文
• コンポーネントレベルのスタイリングにより適している

ブラウザサポートと実装

現在、CSS if()関数は以下でサポートされています：

• Chrome 137+
• Edge 137+
• Chrome for Android
• Android Browser

サポートされていないブラウザについては、フォールバックとして従来のアプローチを使用し続けてください。限定的なサポートのため、本番使用にはユーザーベースの慎重な検討が必要です。

詳細な仕様と更新については、MDN Web Docs for the CSS if() Functionを参照してください。

結論

CSS if()関数は、条件付きスタイリングにおける大きな前進を表しています。ロジックをプロパティ宣言とインラインで配置することで、より保守しやすく理解しやすいスタイルシートを作成します。ブラウザサポートは依然として限定的ですが、よりクリーンなテーマ設定、レスポンシブデザイン、状態ベースのスタイリングにおけるこの関数の潜在能力により、将来のプロジェクトでの探求に値します。

ブラウザの採用が拡大するにつれて、if()関数は条件付きCSSを処理するための標準ツールとなり、現在の多くの回避策をより洗練された直感的な構文で置き換えることが期待されます。

よくある質問

CSS if()とメディアクエリの主な違いは何ですか？

if()関数はプロパティ値内でインライン条件を適用するのに対し、メディアクエリは別のルールブロックを必要とします。これにより関連するロジックが一緒に保持され、コードの重複が減少します。

カスタムプロパティの代わりに通常のCSSプロパティでCSS if()を使用できますか？

現在、style()クエリはCSSカスタムプロパティ（変数）でのみ動作します。background-colorやwidthなどの通常のプロパティを直接チェックすることはできません。

CSS if()関数をサポートしていないブラウザはどう処理すればよいですか？

プログレッシブエンハンスメントを使用してください。従来の方法を使用してベーススタイルを記述し、サポートされているブラウザ用にif()関数を重ねます。@supportsによる機能検出がこの移行の管理に役立ちます。

if()関数がカンマではなくセミコロンを使用するのはなぜですか？

セミコロンにより、CSSパーサーが条件-値ペアを区別できます。特に値自体がrgb()色やフォントスタックのようにカンマを含む場合に有効です。

より複雑なロジックのためにif()関数をネストできますか？

はい、if()関数を相互にネストして決定木を作成できますが、これは可読性に影響する可能性があります。同じ結果を達成するより単純な代替手段があるかどうかを検討してください。