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

if()

Experimental: これは実験的な機能です。

本番で使用する前にブラウザー互換性一覧表をチェックしてください。

if() は CSS の関数で、条件付き検査の結果に応じて、プロパティに異なる値を設定することができます。この検査は、スタイルクエリー、メディアクエリー、機能クエリーに基づいて行うことができます。

条件式CSS関数

対応ブラウザ

機能 デスクトップ モバイル
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
if
実験的
137
137
137
1+対応 (バージョン) 未対応 ※注釈あり サブ機能の解説は MDN Web Docs (CC BY-SA 2.5)

基本構文

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

ライブデモ

--theme: dark

CSS --theme: dark demo.

プレビュー全画面表示

--theme: light

CSS --theme: light demo.

プレビュー全画面表示

Else (default)

CSS Else (default) demo.

プレビュー全画面表示

実務での使いどころ

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

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

注意点

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

アクセシビリティ

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

参考リンク