Limited support 注意が必要。一部のブラウザのみ対応。プロダクション利用は慎重に判断すること。
構文・カスケード Limited support

if()

if()関数により、CSS内でプロパティ値を条件に応じて切り替えることができます。JavaScriptを使わずにCSSだけで条件分岐ロジックを実現し、レスポンシブデザインやテーマ切り替えをより柔軟に実装できます。カスタムプロパティやメディア条件と組み合わせて使用します。

条件式CSS関数

概要

if()関数により、CSS内でプロパティ値を条件に応じて切り替えることができます。JavaScriptを使わずにCSSだけで条件分岐ロジックを実現し、レスポンシブデザインやテーマ切り替えをより柔軟に実装できます。カスタムプロパティやメディア条件と組み合わせて使用します。

対応ブラウザ

デスクトップ

Chrome 137+
Edge 137+
Safari 未対応
Firefox 未対応

モバイル

Chrome Android 137+
Safari iOS 未対応
Firefox Android 未対応

基本構文

CSS 
.box {
  color: if(
    style(--theme: dark): white;
    else: black
  );
}

実務での使いどころ

  • 条件に応じた値の切り替え

    カスタムプロパティの値に応じてスタイルを動的に切り替え、JavaScript不要の条件付きスタイリングを実現します。

注意点

  • 2026年3月時点でChrome/Edgeのみの対応であり、Safari・Firefoxでは利用できません。実験的な機能です。

アクセシビリティ

  • 条件分岐によるスタイル変更がアクセシビリティ基準（コントラスト比やフォントサイズ）を常に満たすことを確認してください。

参考リンク