Chrome 153 がリリースされた。Single-axis scroll containers、Capability 要素の <camera><microphone>、Joint Iteration の Iterator.zip() / Iterator.zipKeyed() が含まれる。

#Single-axis scroll containers

CSS の overflow に、スクロール可能な値(auto / scroll / hidden)と clip の組み合わせが使える。例は overflow: scroll clipoverflow: auto clip。一方の軸だけスクロールコンテナにし、もう一方をスクロールさせずに済む。position: sticky が軸ごとに別の祖先スクローラを参照できる。Chrome 153 の Beta / Dev / Canary ではフラグなしで開発者テストできる。

横スクロールの表ラッパーで、先頭列はラッパーに、先頭行は文書スクローラに sticky する例:

css
.table-wrapper {
  overflow: auto clip;
}

.table-wrapper thead {
  position: sticky;
  top: 0;
}

.table-wrapper td:first-child {
  position: sticky;
  left: 0;
}

対応検出は @supports named-feature(single-axis-scroll-container)、または CSS.supports("named-feature(single-axis-scroll-container)")

#Capability 要素 <camera> / <microphone>

Chrome 144 の <geolocation>、Chrome 151 の <usermedia> に続き、映像専用の <camera> と音声専用の <microphone> が加わった。ブラウザ制御の UI を埋め込み、ユーザーのクリックを契機に権限プロンプトやストリーム開始へ進む。<usermedia> と同じセキュリティモデルと、拒否後のページ内回復パスを保ちつつ、複合メディアが不要なときに単一 capability だけを要求できる。

<camera> / <microphone> は成功時に単一の MediaStreamTracktrack プロパティへ載せ、track イベントを発火する。setConstraints() には軸ごとの MediaTrackConstraintSet{ video: … } ラッパーなし)を渡す。付与後の再クリックはトラックの mute トグルになる。

html
<camera id="cam"></camera>
<video id="preview" autoplay playsinline></video>
js
const cam = document.getElementById("cam");
cam.setConstraints({ width: 1920, height: 1080, facingMode: "user" });
cam.addEventListener("track", () => {
  document.getElementById("preview").srcObject = new MediaStream([cam.track]);
});

#Joint Iteration

JavaScript に Iterator.zip()Iterator.zipKeyed() が入り、複数 iterable を位置でそろえて進める。既定の mode"shortest"(最短の入力が尽きた時点で終了)。"longest" は不足分を任意の padding で埋め、"strict" は長さ不一致で TypeError を投げる。Iterator.zipKeyed() は配列ではなくキー付きオブジェクトを yield する。

js
const days = ["Mon", "Tue", "Wed", "Thu", "Fri"];
const temperatures = [22, 21, 23, 20, 19];
const dayTemperatureMap = new Map(Iterator.zip([days, temperatures]));

#参考文献