CSSのif()関数の使い方とスマートな条件分岐の実装

Webサイトでは、ダークモードを実装したり、ボタンの状態によって色を変えたりする時などに、状況に応じたスタイル調整として条件分岐が欠かせません。
これまで純粋なCSSだけでこれを実現するのは難しい場合もあり、複雑な変化を加えるとなると、JavaScriptによるクラスの付け替えや、複雑なセレクタの組み合わせといったテクニックが必要でありました。

このような技術的なもどかしさも、CSSの進化によって解消されることでしょう。
Chrome 137のバージョンから、if()関数がサポートされ、CSSにおける条件分岐が可能となりました。
これまでJavaScriptを使ったり、複雑なセレクタを駆使したりして実現していたスタイルの動的な切り替えが、これからはCSSだけで、より直感的かつシンプルに記述できるようになります。

ここでは、CSSのif()関数を使った条件分岐でのスタイルの切り替えについてご紹介します。

これまでのCSSのスタイルの分岐

Webサイトにダークモードを実装する場合や、コンポーネントの状態によってスタイルを少しだけ変えたい場合、これまではCSSカスタムプロパティ（CSS変数）を使って値を管理し、クラスの付け替えで対応することが多かったでしょう。（他にも方法はありますが）

例えば、以下のような形です。

:root {
  --background-color: white;
  --text-color: black;
}

body.dark {
  --background-color: black;
  --text-color: white;
}

body {
  background-color: var(--background-color);
  color: var(--text-color);
}

この方法は非常に有効ですが、モードが増えたり、条件が複雑になったりすると、管理する変数やクラスが増えていくという課題もでてきます。

そこで使えるのがif()関数です。

CSSのif()関数の使い方

CSSのif()関数は、プロパティの値そのものを、条件に応じて切り替えることができます。
まずはその構文を見てみましょう。

構文

selector {
  property: if(
    style(<some-condition>): <some-value>;
    style(<some-other-condition>): <some-other-value>;
    else: <default-value>;
  );
}

if()関数は、指定された条件（）が真（true）であるか偽（false）であるかに基づいて、異なるCSSの値を適用します。
if()関数内で使われるstyle()関数は、カスタムプロパティ（–で始まる変数）の値をチェックするなど、特定のスタイル条件を評価します。
else: は、どのstyle()の条件にも一致しなかった場合に適用される、いわば「それ以外」の値を指定します。これは省略可能です。

if…else 文は、以下のようなシンプルな構文になります。

selector {
  property: if(<条件>, <真の場合の値>, <偽の場合の値>);
}

非常にシンプルです。
プログラミング言語でお馴染みの三項演算子 (condition ? trueValue : falseValue) のような感覚で使えます。

if…else 文は、改行して以下のように記述することもできます。

selector {
  property: if(
    style(<条件>): <真の場合の値>;
    else: <偽の場合の値>;
  );
}

また、複数の条件があり、else if 節を作成する場合は、以下のようになります。

selector {
  property: if(
    style(<条件1>): <条件1が真の場合の値>;
    style(<条件2>): <条件2が真の場合の値>;
    else: <どの条件にも当てはまらない場合のデフォルト値>;
  );
}

if()関数を使った例

if()関数を実際に使って、ダークモードとライトモードのスタイルの切り替えを実装してみます。

まずはHTML。
モードを識別するためのクラスを持つHTML要素を用意します。

HTML

<div class="dark">Dark</div>
<div class="light">Light</div>

続いてはCSSです。
.darkクラスには–mode: dark;、.lightクラスには–mode: light;というカスタムプロパティをセットしておき、.lightクラス、または.darkクラスを持つもの全ての要素を対象に、background-colorプロパティやcolorプロパティのスタイルをif()関数を使って切り替えています。

CSS

.dark {
  --mode: dark;
}

.light {
  --mode: light;
}

*:is(.light, .dark) {
  background-color: if(
    style(--mode: dark): black;
    else: white
  );
  color: if(
    style(--mode: dark): white;
    else: black
  );
}

div {
  padding: 0.625rem;
}

上記は、.lightクラスか.darkクラス、どちらかを持つすべての要素に対して、背景色は –mode の値が dark であれば黒、そうでなければ白に、文字色は –mode の値が dark であれば白、そうでなければ黒に指定となります。

もちろん、上記のif()関数は、下記のようにシンプルに記述することもできます。

*:is(.light, .dark) {
  background-color: if(style(--mode: dark): black; else: white);
  color: if(style(--mode: dark): white; else: black);
}

if…else 文また else if 節を使った複数条件なのか、可読性を考えながら記述するといいでしょう。

最後に

今回ご紹介したのは、テーマの切り替えというシンプルな例ですが、if()関数の可能性はそれだけにとどまりません。

フォームのバリデーション状態（valid, invalid）に応じたスタイルの変更や、コンポーネントのバリエーション（例：–type: primaryなら青、–type: secondaryならグレー）、またコンテナクエリと組み合わせた、より動的なレイアウト調整など、これまでJavaScriptの力を借りていた多くの場面で、CSSの記述性を大幅に向上させてくれるポテンシャルを秘めています。

まだ新しい機能であるため、ブラウザの対応状況には注意が必要ですが、CSS開発を大きく変える機能であることは間違いありません。
ぜひ新しいif()関数を試してみてください。