【2025年7月】Chromeで使える if() 関数とは？｜条件によってCSSを切り替える新機能をコード解説

2025年7月、CSSに革命的な新機能「if()関数」が導入され、Webデザインの実装がより柔軟でスマートにできるようになりました。
この記事では、CSS if()関数の構文・実例・ブラウザ対応状況・フォールバック方法までを、Webデザイナー向けにわかりやすく解説します。

CSS if()関数とは？

if()関数は、CSS内で条件分岐を記述できる新しい構文です。これまではJavaScriptや複雑なメディアクエリを使っていた処理を、CSSの中だけで完結できるようになりました。

開発者Una Kravets氏によるChrome 137での新機能（if() + reading-flow）紹介：

基本構文は以下のようになります：

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

condition には以下のような形式が使えます：

• media(…)：メディアクエリ条件
• supports(…)：機能サポートの可否
• style(…)：カスタムプロパティの値による条件判定

これだけだと少し理解し難いので実例で詳しく見ていきましょう!

実例：Webデザインへの具体的な活用方法

1. ポインター環境に応じてボタンサイズを変える

タッチデバイスとマウス環境で、ボタンサイズを切り替えたい場合：

button { 
  width: if(
    media(any-pointer: fine): 30px; else: 44px
  ); 
}

• any-pointer: fine → マウスなど精密な操作ができる環境では30px
• else → タッチ操作などでは44pxに

このように、従来の@mediaよりも簡潔に条件分岐を記述できます。

2. 色空間の対応状況によってデザインを切り替える

最新のカラースペース（OKLCH）に対応しているかどうかで、色を分ける例です。

body { 
  background-color: if(supports(color: oklch(0.7 0.185 232)): oklch(0.7 0.185 232); else: #00adf3 
  ); 
}

• OKLCH対応ブラウザでは、鮮やかで高精度な色を表示
• 非対応ブラウザでは、従来のsRGBベースのカラーで代替

CSSだけで、高度なビジュアル品質の切り替えが可能になります。

3. カスタムプロパティによるサイズ指定

以下のように、テーマやコンポーネントの状態によってサイズを切り替えることもできます。

padding: 1em; 
padding: if(style(--size: "2xl"): 1em; else: 0.25em);

この場合、–sizeが”2xl“であるときだけ1em、そうでないときは0.25emが適用されます。
状態に応じた細かなスタイル制御が、JavaScriptなしで可能です。

実際のコードをいじってみよう!

👇 簡単なボックスとテキストのコードを用意しました!
–bgAccentに色を指定して、その色を条件にpタグの文字色を変えています。

試しに–bgAccentのlightgrayを#222に変えてみましょう。
するとpタグの色がwhiteに変化します✨

See the Pen Chromeで使えるようになった if() 関数とは？ by 小林祐也 (@ulfntssw-the-animator) on CodePen.

対応ブラウザ状況

2025年7月現在、CSS if()関数が利用できるのは Google Chrome 137以降 のみです。

ブラウザ	対応状況
Chrome 137〜	✅ 対応済み（正式実装）
Firefox	❌ 未対応
Safari	❌ 未対応
Edge	❌ 未対応（ただしChromeベースのため将来的には対応予定）

現在のところ、他の主要ブラウザでは未対応のため、フォールバック対応を意識したスタイル記述が必要です。

フォールバック方法と注意点

1. フォールバック値を先に書いておく

if()が使えない環境でもスタイルが崩れないよう、まず基本値を記述しておきます。

padding: 1em; /* フォールバック用 */ 
padding: if(style(--size: "2xl"): 1em; else: 0.25em);

非対応ブラウザでは、最初の値が適用され、if()は無視されます。

2. else: は必ず書く

CSSのif()関数は、対応していても else: がないと動作が不安定になります。
必ず else: を含めた形で記述しましょう。

3. @supportsで環境を分ける（上級者向け）

@supportsを使って、if()をサポートしているかどうかでスタイルブロックを分けることもできます。
ただし、2025年7月時点では@supportsで if()の可否を正確に検出する方法は確立されていません。

@supports (width: if(media(all): 100px; else: 50px)) { 
  /* if()対応ブラウザ用のスタイル */ 
}

対応が進めば、このような構文も実用的になるでしょう。

今後の展望

このif()関数は、W3CによるCSS Conditional Rules Module Level 5の一部として標準化が進められており、将来的にはFirefoxやSafariなど他ブラウザでも利用可能になる見込みです。

対応が広がれば、CSSだけでインタラクティブなUI制御やテーマの切り替えが行えるようになり、Webデザイナーにとって大きな武器となるでしょう。

その他にもCSSはブラウザの種類やバージョンで使用できないものもあるので
こまめにブラウザの最新ニュースはチェックするようにしましょう!

• 【Safari】CSSのgapが効かない!? 対応ブラウザ状況

【Safari】CSSのgapが効かない!? 対応ブラウザ状況

まとめ

• CSS if()関数は、条件に応じたスタイルを直接CSSで記述できる革新的な新機能
• 現在はChrome 137以降のみで対応
• 実装時にはフォールバック値の記述が必須
• メディア環境、カスタムプロパティ、機能サポートによって柔軟にスタイルを切り替え可能
• 今後の標準化・対応拡大により、CSS設計の在り方が変わっていく可能性がある

Webデザイナーとして、CSS if()はこれからのUI設計に欠かせない知識になるでしょう。
まだ対応ブラウザは限定的ですが、先行して学び、実験的に取り入れる価値は十分にあります。

この記事の振り返りFAQ

関連リンク

• Chrome 137 の新機能  |  Blog  |  Chrome for Developers