お久しぶりです。nhです。
今週は一気に気温が上がって、すっかり夏のような暑さでしたね。
慌てて日焼け止めや日傘を準備し始めた方も多いのではないでしょうか？ この間まで春の陽気だった気がするのに、季節が巡るのは本当にあっという間ですね！

今回ご紹介するのは、CSSのif()関数についてです。
CSSなのにif()関数？JavaScriptやPHPの間違いなんじゃ？？と思った方がいるかもしれません。
if()関数は実は2025年の中盤あたりから本格化した次世代の機能なんです！

基本的な構文

property: if(条件 : 値; else: デフォルト値);

• 評価順：先に「真」になった条件の値が採用されます。
• 注意： `if`と`(`の間にスペースは厳禁です。

以下は実際にスタイルを適応させた時の見本になります。
３つのクエリの紹介とともに、スタイルの変化をご確認ください。

判定として使用できる3つのクエリ
①スタイルクエリ：CSS変数の値をチェック

【HTML】
<li class="size-30 grid place-items-center text-white media_query">Media</li>

【CSS】
.media_query {
				background: if(
					media(768px <= width): olivedrab;
					else: maroon;
				);
				;
			}

②メディアクエリ：画面幅やダークモード設定などをチェック

【HTML】
<li class="size-30 grid place-items-center text-white style_query" style="--variant: style_query;">Style</li>

【CSS】
.style_query {
				background: if(
					style(--variant: style_query): peru;
				);
				;
			}

③機能クエリ：ブラウザが特定の機能に対応しているかチェック

【HTML】
<li class="size-30 grid place-items-center text-white supports_query" style="--scheme: supports_query;">Supports</li>

【CSS】
.supports_query {
				background: if(
					supports(background: lch(32.3% 133.82 306.29)): lch(32.3% 133.82 306.29);
					else: lch(53.59% 0.01 296.81);
				);
			}

主な特徴として、以下が挙げられます。

• 部分利用が可能：`border: 1px solid if(...)` のように、値の一部にだけ使えます。
• 入れ子（ネスト）：関数の中にさらに`if()`を入れられます。
• ロジックの集約：デザインシステムのボタンの切り替えなどを、詳細度を上げずに管理できます。

ただし注意点があり、実はまだ実験的な機能なのです。
その証拠にサポートされているのが

• Chrome：137以上
• Edge：137以上
• Opera：121以上

のいずれかになります。（Firefox、Safariはまだ未対応）

以前はスタイルごとにCSSを分けていたり、Javascript側で制御していたスタイルが、CSS１つで完結できるのはいいですね。
慣れるまでにちょっとコツが必要ですが、便利な機能だと思うので、早くどのブラウザでも対応して欲しいですね。