7月10日、CSS Tricksが「If CSS Gets Inline Conditionals」と題した記事を公開した。この記事では、CSSの条件付きスタイル適用に関する新しい提案について詳しく紹介されている。

if() ー CSSにインライン条件式が導入される

6月13日、CSSワーキンググループ（CSSWG）がCSS Values Module Level 5仕様にif()条件を追加することを決定した。このニュースは、同日Lea Verouの投稿によって注目を集めた。

A historical day for CSS 😀🎉

If you write any components used and/or styled by others, you know how huge this is!

background: if(style(--variant: success), var(--green));

Even if you don’t, this will allow things like:
padding: if(var(--2xl), 1em, var(--xl) or var(--m),… pic.twitter.com/cXeqwBuXvK

— Lea Verou (@LeaVerou) June 13, 2024

CSSにとって歴史的な日だ

他の人々によって使用およびスタイルが適用されるコンポーネントを作成する場合、この重要性が理解できるだろう！

background: if(style(–variant: success), var(–green));

もしそうでなくても、次のようなことが可能になる：
padding: if(var(–2xl), 1em, var(–xl) or var(–m),… pic.twitter.com/cXeqwBuXvK

— Lea Verou (@LeaVerou) June 13, 2024

この機能が完全に実現するまでにはまだ時間がかかる可能性があるが、CSSにif()を組み込むというアイデアは非常に興味深く、今後もウォッチし続ける価値がある。

とはいえ、CSSに条件分岐をもたらすというアイデアは新しいものではない。最近では条件付きスタイルを可能にするいくつかのCSS機能が追加されている。:has()やコンテナスタイルクエリはその例だ。

これらとの違いは、if()はセレクターを使用してインライン条件を記述できるようにするという点である。

CSSにおけるif()の構文

今回提案されたif()の構文を要約すると以下の通りである。

if( <container-query>, [<declaration-value>]{1, 2} )

if()は引数を3つ取ることができ、1つ目の引数が条件式、2つめは条件がtrueだった場合の値、3つめはfalseだった場合の値だ。第三引数は省略することができ、省略された場合は空の値として扱われる。
以下にif()の使用例を示す。

.element {
  background-color:
    /* 以下のカスタムプロパティが宣言されている場合: */
    if(style(--variant: success),
      var(--color-green-50), /* 条件がマッチした場合 */
      var(--color-blue-50);  /* デフォルトスタイル */
    );
}

この場合、--variantというカスタムプロパティがsuccessに設定されているかどうかを確認し、

• --variantがsuccessに設定されている場合、その値を--color-green-50（緑色の値）に設定する。
• --variantがsuccessに設定されていない場合、その値を--color-blue-50（青色の値）に設定する。

デフォルトスタイルはオプションであり、場合によっては省略できる：

.element {
  background-color:
    /* 以下のカスタムプロパティが宣言されている場合: */
    if(style(--variant: success),
      var(--color-green-50) /* 条件がマッチした場合 */
    );
}

また、if()は入れ子にすることも可能だ。

background-color: if(
  style(--variant: success), var(--color-success-60),
    /* ifの入れ子の例 */
    if(style(--variant: warning), var(--color-warning-60),
      if(style(--variant: danger), var(--color-danger-60),
        if(style(--variant: primary), var(--color-primary)
      )
    ),
  )
);

このように複雑なネストが可能である。現在の提案では、これをより平坦に記述することが可能な構文も提案されている。

if(
  [ <container-query>, [<declaration-value>]{2}  ]#{0, },
  <container-query>, [<declaration-value>]{1, 2}
)

つまり、ネストされた条件を最初の条件の外に宣言することで、より平坦な構造にするという概念である。

background-color: if(
  style(--variant: success), var(--color-success-60),
  style(--variant: warning), var(--color-warning-60),
  style(--variant: danger), var(--color-danger-60),
  style(--variant: primary), var(--color-primary)
);

このように、一つのif()文の中に複数の条件を含めることができる。

今回は、提案が承認されたばかりという段階で、これからW3CのCSSワーキンググループが本格的な仕様策定に取り組むこととなる。これが完全に実現するまでには、まだしばらく時間がかかるが、未来のCSSスタイリングを大きく変える可能性のある仕様として、大きな注目を集めている。

詳細は「If CSS Gets Inline Conditionals」を参照していただきたい。