公開日: 2025 年 7 月 1 日
Chrome 137 以降では、if() 関数を使用して CSS インライン条件式を試すことができます。if() を使用すると、スタイルクエリやメディアクエリなどの動的スタイル向けのデベロッパー インターフェースがよりクリーンになります。主な違いについては、こちらの投稿をご覧ください。
CSS の if() 関数は、次のように構成された一連の条件と値のペアを使用して動作します。
property: if(condition-1: value-1; condition-2: value-2; condition-3: value-3);
他の条件が満たされない場合に使用される else ステートメントを指定できます。
property: if(condition-1: value-1; condition-2: value-2; condition-3: value-3; else: value-4);
現時点では、if() は次の 3 種類のクエリに対応しています。
style(): スタイル クエリmedia(): メディアクエリsupports(): クエリをサポート
例を挙げて考えてみましょう。
デモ: インライン メディアクエリ
if() を使用すると、スタイルにインライン メディアクエリを簡単に含めることができます。たとえば、ユーザーのテーマ設定（ライトまたはダーク）を確認したり、ビューポートの幅に対してインライン メディアクエリを実行したりできます。次の例は、ポインティング デバイスのメディアクエリを示しています。ボタンのデフォルトのサイズは、マウスなどのポインタが細かいデバイスでは 30 ピクセルですが、ポインタが粗いタッチスクリーン デバイスでは、アクセスしやすいように適切なタッチ間隔を確保するため、推奨される最小サイズの 44 ピクセルになります。
button {
aspect-ratio: 1;
width: if(media(any-pointer: fine): 30px; else: 44px);
}
上記のコードは、次のメディアクエリと同じ結果を返します。
button {
aspect-ratio: 1;
width: 44px;
}
@media (any-pointer: fine) {
button {
width: 30px;
}
}
if() 形式を使用すると、スタイリング ロジックを 2 か所に記述する必要がなく、ロジックをインラインで記述できます。
if() を使用すると、コース ポインタを備えたデバイスのボタンのフォントサイズが大きくなるデモ。デモ: インライン サポート クエリ
if() を使用するもう 1 つの方法は、インライン サポート クエリを作成することです。たとえば、OKLCH などの広色域のサポートを確認するには、次のようにします。
body {
background-color: if(
supports(color: oklch(0.7 0.185 232)): oklch(0.7 0.185 232);
else: #00adf3;
);
&::after {
content: if(
supports(color: oklch(0.7 0.185 232)): "Your browser supports OKLCH";
else: "Your browser does not support OKLCH";
);
}
}
このコードを使用すると、ブラウザが oklch 色空間をサポートしている場合、ユーザーにはより鮮やかな色が表示され、::after 疑似コンテンツに「Your browser supports OKLCH」というメッセージが表示されます。
if() 関数を使用するサポートクエリ。詳しくは、oklch.com のカラー選択ツールとリソースで、RGB とより高度な色空間の違いをご確認ください。
デモ: UI 状態の可視化
状態ベースのスタイル設定に if() を使用することもできます。たとえば、UI の状態（保留中または完了）に基づいて進行状況カードのスタイルを設定します。ステータスをデータ属性またはカスタム プロパティに直接保存し、if() を使用してプロパティにインラインでスタイルを適用します。
<div class="card" data-status="complete">
...
</div>
.card {
--status: attr(data-status type(<custom-ident>));
border-color: if(
style(--status: pending): royalblue;
style(--status: complete): seagreen;
else: gray);
background-color: if(
style(--status: pending): #eff7fa;
style(--status: complete): #f6fff6;
else: #f7f7f7);
}
if() 関数を使用して、プロパティにステートフル ラベルをインラインでスタイル設定します。if() 関数内の style() を使用すると、ターゲットとする要素を直接スタイル設定できます。CSS スタイル クエリで必要となる親要素は必要ありません。
このデモでは、if() を使用して CSS の新しいアーキテクチャ アプローチをサポートする基本的なケースを示します。クラスではなく CSS カスタム プロパティを使用するメリットの 1 つは、CSS で簡単に更新できることです。たとえば、メディアクエリや :hover などの疑似状態を使用して更新できます。
次のステップ
if() の追加により、CSS デベロッパーに新たなアーキテクチャの機会が提供されます。スタイルクエリなどのテクノロジーが進化するにつれて、if() 関数内で範囲クエリが可能になる可能性が高く、また、今後提案されるカスタム関数（CSS @function）と組み合わせる場合にも役立ちます。
これらの機能について詳しくは、以下をご覧ください。