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 プロパティは、flex、grid、block レイアウトの要素がユーザー補助ツールに公開される順序と、線形シーケンシャル ナビゲーション メソッドを使用してフォーカスされる方法を制御します。これにより、グリッド レイアウトとフレックス レイアウトで長年問題となっていた、タブオーダーがアイテムのレイアウト順序と一致しなくなる問題を解決できます。

キーワード値を 1 つ受け取ります。デフォルトは normal で、DOM 順で要素を並べる動作を維持します。フレキシブル コンテナ内で使用するには、値を 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 プログラムが Promise のジェネレータとして機能し、WebAssembly プログラムが Promise を持つ API とやり取りできるようになります。

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

その他

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

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

関連情報

ここでは、主なハイライトの一部のみを取り上げます。Chrome 137 のその他の変更については、以下のリンクをご覧ください。

登録

最新情報を入手するには、Chrome Developers YouTube チャンネルに登録してください。新しい動画が公開されるたびにメール通知が届きます。X または LinkedIn で Google をフォローして、新しい記事やブログ投稿を入手することもできます。

Chrome 138 がリリースされ次第、Chrome の新機能についてお知らせします。