このページは Cloud Translation API によって翻訳されました。

Chrome 137 の新機能

Rachel Andrew

公開日: 2025 年 5 月 27 日

Chrome 137 がリリースされました。この投稿では、このリリースの主な機能について説明します。Chrome 137 リリースノートの全文

このリリースのハイライト:

reading-flow と reading-order を使用して、複雑なレイアウトで論理的なタブ順序を確保します。CSS if() 関数を使用すると、条件付き値を簡潔に表現できます。JavaScript Promise Integration（JSPI）を使用すると、WebAssembly アプリケーションを JavaScript Promise と統合できます。

CSS `reading-flow` と `reading-order`

reading-flow CSS プロパティは、フレックス、グリッド、ブロックレイアウト内の要素がユーザー補助ツールに公開される順序と、リニアシーケンシャルナビゲーションメソッドを使用してフォーカスを取得する方法を制御します。これにより、グリッドレイアウトとフレックスレイアウトに関する長年の課題が解決されます。この課題では、タブ順序がアイテムのレイアウト順序と一致しなくなる可能性があります。

キーワード値を 1 つ取ります。デフォルトは normal で、DOM 順に要素を並べ替える動作を維持します。Flex コンテナ内で使用するには、値を flex-visual または flex-flow に設定します。グリッドコンテナ内で使用するには、値を grid-rows、grid-columns、または grid-order に設定します。

reading-order CSS プロパティを使用すると、読み上げフローコンテナ内のアイテムの順序を手動でオーバーライドできます。このプロパティをグリッド、フレックス、ブロックコンテナ内で使用する場合は、コンテナの reading-flow 値を source-order に設定し、個々のアイテムの reading-order を整数値に設定します。

詳しくは、論理的な連続フォーカスナビゲーションに CSS reading-flow を使用するをご覧ください。

CSS `if()` 関数

CSS の if() 関数を使用すると、条件付き値を簡潔に表現できます。セミコロンで区切られた一連の条件値ペアを指定します。この関数は、各条件を順番に評価し、最初の true 条件に関連付けられた値を返します。条件のいずれも true と評価されない場合、関数は空のトークンストリームを返します。

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

.dark {
  --color: black;
}

.light {
  --color: white;
}

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

WebAssembly JavaScript Promise Integration（JSPI）

JavaScript Promise Integration（JSPI）は、WebAssembly アプリケーションを JavaScript Promise と統合できる API です。

これにより、WebAssembly プログラムがプロミスの生成元として機能し、WebAssembly プログラムがプロミスを含む API を操作できるようになります。

特に、アプリケーションが JSPI を使用して Promise を含む（JavaScript）API を呼び出すと、WebAssembly コードが中断され、WebAssembly プログラムの元の呼び出し元に、WebAssembly プログラムが最終的に完了したときに満たされる Promise が渡されます。

その他

もちろん、他にもたくさんあります。

ストレージパーティションの延長として、Chrome ではストレージキーによる Blob URL アクセスのパーティショニングを実装しました。
キャンバスの浮動小数点ピクセル形式を実装しました。
offset-path: shape() がサポートされているため、レスポンシブシェイプを使用してアニメーションパスを設定できます。

Chrome 137 の新機能

CSS reading-flow と reading-order

CSS if() 関数

WebAssembly JavaScript Promise Integration（JSPI）

その他

関連情報

登録

CSS `reading-flow` と `reading-order`

CSS `if()` 関数