新しい if() 関数を使用した CSS 条件

Una Kravets

公開日: 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 px ですが、粗いポインタを備えたタッチスクリーン デバイスでは、アクセスしやすい適切なタップ間隔を確保するために、ボタンのサイズは 44 px 以上が推奨されます。

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() を使用するもう 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 疑似コンテンツに「ブラウザは OKLCH をサポートしています」というメッセージが表示されます。

詳細と、rgb と高度な色空間の違いについては、oklch.com のカラー選択ツールとリソースをご覧ください。

デモ: 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() 関数内の style() を使用すると、ターゲットとする要素に直接スタイルを適用できます。CSS スタイルクエリのように親要素は必要ありません。

このデモでは、if() を使用して CSS の新しいアーキテクチャ アプローチをサポートする基本的なケースを示します。クラスではなく CSS カスタム プロパティを使用するメリットの 1 つは、CSS で簡単に更新できることです。たとえば、メディアクエリや :hover などの疑似状態を使用して更新できます。

次のステップ

if() の追加により、CSS デベロッパーは新しいアーキテクチャを構築できるようになりました。スタイルクエリなどの技術が進歩するにつれて、if() 関数内で範囲クエリが可能になる可能性があります。また、今後のカスタム関数プロポーザル（CSS @function）と組み合わせると便利です。

これらの機能について詳しくは、以下をご覧ください。

• デモ 3 の 3 分間の動画チュートリアル
• Lea Verou の記事