CSS if()関数ビルダーとは
CSSのif()関数を使うと、プロパティ宣言内に直接条件付き値を記述できます。値を@media、@container、@supportsのアットルールでラップする代わりに、if()をインラインで使用します：width: if(style(--variant: large): 300px else 150px)。3つの条件タイプをサポートしています。style()はCSSカスタムプロパティ値をチェックし、media()はmin-widthやprefers-color-schemeなどのメディア特性をテストし、supports()はブラウザが特定のCSS機能をサポートしているかを検出します。Chrome 137はif(style())を、Chrome 142はif(media())とif(supports())をサポートしています。
クイックアンサー
CSSのif()関数を使用すると、プロパティ宣言内にインラインで条件付き値を記述できます。if(style())でCSSカスタムプロパティに基づく分岐、if(media())でビューポート幅などのメディア特性に基づく分岐、if(supports())でブラウザ機能サポートに基づく分岐が可能です。Chrome 137以上がif(style())を、Chrome 142以上がif(media())とif(supports())をサポートします。
Last updated: 2026-05-30
制限事項
- if()関数はChrome 137以上（style()）およびChrome 142以上（media()、supports()）でのみ利用可能です。2026年5月現在、FirefoxとSafariは安定版リリースでCSS if()をまだサポートしていません。
- if()は単一の条件に対して単一の値を評価します。複数の宣言変更を持つ複雑なルールブロックに対して@mediaや@containerのアットルールを置き換えることはできません。
- if(style())は明示的に設定されたカスタムプロパティまたは登録済みのカスタムプロパティでのみ機能します。ターゲット要素に明示的な値がなく先祖から継承されたカスタムプロパティは、一致しないものとして扱われます。
Sources:MDN Web Docs · W3C Specifications · jquery.app on GitHub
使い方
- 条件タイプを選択します。style()はCSSカスタムプロパティ値のチェック、media()はビューポートやユーザー設定のメディア特性、supports()は機能検出に使用します。
- 条件式と、条件が真の場合に使用する値を入力します。
- オプションで、条件が偽の場合に適用されるelse値を追加します。
- 生成されたif()宣言をコピーして、CSSプロパティ値に直接配置します。
主な用途
- @containerクエリでルール全体をラップせずに、CSSカスタムプロパティ値に基づいて異なる幅を設定する。
- 単一のプロパティ宣言内でprefers-color-schemeに基づいて条件付きでカラースキーム値を適用する。
- ブラウザが特定のCSS機能をサポートしていない場合のフォールバック値をsupports()で提供する。