編集

Chrome 137 リリース

#Chrome #CSS #WebAssembly

Chrome 137 が安定版としてリリース。CSS if()関数による条件値表現の簡素化、CSS reading-flow・reading-orderプロパティでのタブ順序制御、WebAssembly JavaScript Promise Integration（JSPI）が主要な新機能。その他、Selection API 拡張、SVG transform属性対応、システムアクセントカラー対応、Ed25519 暗号化アルゴリズム追加など多数の機能改善。

出展：

#CSS if()関数

条件値を簡潔に表現する新機能。セミコロンで区切られた条件ー値ペアを順次評価し、最初に真となる条件の値を返す。

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

.dark {
  --color: black;
}
.light {
  --color: white;
}

#CSS reading-flow/reading-order

Flex や Grid レイアウトでのタブ順序とアクセシビリティツールのフォーカス順序を制御。DOM 順序と視覚的順序の不整合を解決。

css
.grid-container {
  reading-flow: grid-rows;
}

.item {
  reading-order: 2;
}

#WebAssembly JavaScript Promise Integration (JSPI)

WebAssembly アプリケーションが JavaScript Promise と統合。WebAssembly コードが非同期 API 呼び出し時に中断され、完了時に Promise が履行される。同期的な C/C++コードから非同期 Web API への透過的なアクセスを実現。

c
// C言語でのFibonacci計算（Promise経由で加算）
long promiseFib(long x) {
  if (x == 0) return 0;
  if (x == 1) return 1;
  return promiseAdd(promiseFib(x - 1), promiseFib(x - 2));
}

// JavaScriptのPromiseを呼び出し
EM_ASYNC_JS(long, promiseAdd, (long x, long y), {
  return Promise.resolve(x + y);
});

出展：WebAssembly JavaScript Promise Integration (JSPI) enters origin trial

#Blob URL Partitioning

Storage Partitioning の継続で Blob URL アクセスを Storage Key（トップレベルサイト、フレーム origin）で分割。プライバシー保護を強化。

次のようにサイト A で生成された Blob URL に、別のサイトの iframe 内からアクセスできなくなった。 このような利用をしている場合、Storage Access API などを利用する検討が必要。

javascript
// サイトA (a.com) がBlob URLを作成
const blob = new Blob(["データ"], { type: "text/plain" });
const blobUrl = URL.createObjectURL(blob);

// サイトB (b.com) のiframeでは同じBlob URLにアクセス不可
編集