これは朗報！ついにCSSでif else文が使えるようになります、Chrome 137で新しく追加された7個のCSSの機能

Post on:2025年5月29日

はじめに

5/28にリリースされたChrome 137で7個のCSSの新しい機能が追加されました。対象となるChrome 137は、Android、ChromeOS、Linux、macOS、Windowsに適用されます。

以下、その7個の新しいCSSの機能を紹介します。

if else文の条件付きでCSSの値を設定できるif()関数

CSSでif()関数が使用できるようになり、if else文の条件付きでCSSの値を設定できるようになりました。この関数はセミコロンで区切られた一連の条件と値のペアが基本書式です。

CSSのif()関数は各条件を順番に評価し、最初にtrueと評価された条件に関連付けられた価を返します。いずれの条件もtrueと評価されなかった場合、関数は空のトークンストリームを返します。これにより、複雑なロジックをシンプルかつ簡潔に記述することができます。

たとえば、下記のHTMLがあるとします。

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

1 2	<div class="dark">dark</div> <div class="light">light</div>

if()関数で条件付きにし、.darkの場合はblackを適用し、それ以外（else）はwhiteを適用します。

div {
  color: var(--color);
  background-color: if(style(--color: black): black; else: white);
}

.dark {
  --color: black;
}

.light {
  --color: white;
}

div {

color: var(--color);

background-color: if(style(--color: black): black; else: white);

}

.dark {

--color: black;

}

.light {

--color: white;

}

CSSのif()関数は、可能性の塊です！
light-dark()関数をカラー値以外でも機能させたり、コンテナクエリを使用したカスタム関数など、今後いろいろな使い方がでてくると思います。

CSSでif()関数が使えるようになり、if else文の条件付きで値を設定できるようになります

reading-flowとreading-orderプロパティ

reading-flowプロパティは、CSS GridやFlexboxをはじめ、ブロックレイアウト内の要素がアクセシビリティツールに表示される順序とキーボードナビゲーションでtabキーでフォーカスされる順序を制御できます。これにより長年問題となっていた、tabによる順序と配置された順序が異なるという問題が解決されます。

reading-flowプロパティに設定できる値は、下記の通りです。

normal
flex-visual
flex-flow
grid-rows
grid-columns
grid-order
source-order

reading-flowプロパティの値は1つを設定でき、デフォルトはnormalです。これにより要素の順序はDOMの順序が維持されます。Flexコンテナの場合にはflex-visualまたはflex-flowを設定し、gridコンテナの場合にはgrid-rowsまたはgrid-columnまたはgrid-orderを設定します。

reading-orderプロパティは、読み取りフローコンテナ内の順序を手動で上書きできます。設定できる値は整数値で、デフォルト値は0です。

offset-pathでのshape()関数

shape()関数はすでにclip-pathでサポートされており、レスポンシブなクリッピングを可能にします。offset-pathでもサポートすることで、同じ種類のシェイプが使用できるようになります。

SVGSVGElementのtransform属性をサポート

transform属性がサポートされたことで、<svg>ルート要素のtranform属性を用いて変形プロパティ（拡大縮小・回転・平行移動・傾きなど）を直接適用できるようになりました。この機能強化によってSVGの座標系全体やコンテンツ全体を操作できるようになり、レスポンシブでインタラクティブなベクターグラフィックをより柔軟に作成できるようになります。

このtransform属性をサポートすることで、追加のラッパー要素や複雑なCSSの回避策を必要とせずに、SVG要素を変換できるため、スケーラブルでアニメーション化されたWebグラフィックを構築するプロセスが簡単になります。

SVGの<use>要素

この機能は、参照要件を緩和することでSVGの<use>要素の効率化を図ります。現在、SVGドキュメント内のフラグメントを明示的に参照する必要があります。フラグメントIDが与えられない場合、<use>要素はターゲットを解決できず、レンダリングも参照もされません。

この機能により、フラグメントを省略したり、外部SVGファイル名のみを与えるだけで自動的にルート要素が参照されるようになります。ルートにIDを割り当てるためだけに参照先のドキュメントを変更する必要がなくなります。このような手作業による作業が簡素化され、作業効率が向上します。

フォーム要素にOSのアクセントカラー

この機能により、フォーム要素にOSのアクセントカラーを使用できるようになりました。accent-colorプロパティを使用すると、チェックボックス・ラジオボタン・プログレスバーなどのフォーム要素にユーザーが使用しているOSで定義されたアクセントカラーが自動的に適用されます。この機能は2021年からmacOSでサポートされており、現在はWindowsとChromeOSでもサポートされました。