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 clip や overflow: auto clip。一方の軸だけスクロールコンテナにし、もう一方をスクロールさせずに済む。position: sticky が軸ごとに別の祖先スクローラを参照できる。Chrome 153 の Beta / Dev / Canary ではフラグなしで開発者テストできる。
横スクロールの表ラッパーで、先頭列はラッパーに、先頭行は文書スクローラに sticky する例:
.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> は成功時に単一の MediaStreamTrack を track プロパティへ載せ、track イベントを発火する。setConstraints() には軸ごとの MediaTrackConstraintSet({ video: … } ラッパーなし)を渡す。付与後の再クリックはトラックの mute トグルになる。
<camera id="cam"></camera>
<video id="preview" autoplay playsinline></video>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 する。
const days = ["Mon", "Tue", "Wed", "Thu", "Fri"];
const temperatures = [22, 21, 23, 20, 19];
const dayTemperatureMap = new Map(Iterator.zip([days, temperatures]));