Chrome 149

368文字
2分
編集
#Chrome#CSS#JavaScript

Chrome 149 がリリースされた。CSS ギャップ装飾、bfcache 進入時の WebSocket 切断、Intl.Locale.prototype.variants の追加が含まれる。

#CSS ギャップ装飾

grid や flexbox などのコンテナレイアウトの gap を、column-rule-inset や row-rule-inset で縮小・拡張し、column-rule-visibility-items や row-rule-visibility-items で隣接アイテム間のみ線を出すなど、装飾を直接指定できる。幅・色・inset はアニメーション可能である。未対応ブラウザでは gap は装飾なしで通常どおり描画される。

css
.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  column-rule: 2px solid #ccc;
  row-rule: 1px dashed #999;
  column-rule-visibility-items: between;
}

#bfcache 進入時の WebSocket 切断

アクティブな WebSocket 接続があるページも、バックフォワードキャッシュ（bfcache）に入れるようになった。従来は接続があるとページを不適格とみなして破棄していたが、bfcache 進入時に接続を先に閉じることで、メモリ上に保持して瞬時に復元できる。

javascript
const ws = new WebSocket("wss://example.com/live");
ws.addEventListener("open", () => {
  ws.send(JSON.stringify({ type: "subscribe" }));
});

ユーザーが別ページへ移動すると接続は閉じられるが、戻る操作でページは bfcache から復元される。

#Intl.Locale.prototype.variants

Intl.Locale オブジェクトから、ロケール識別子のバリアント部分を取得できる variants アクセサーが追加された。言語・地域・文字体系の三要素では区別できない言語派生形を表す。Firefox と Safari では既に利用可能だった。

javascript
const locale = new Intl.Locale("sl-rozaj-biske");
console.log(locale.variants); // "rozaj-biske"

const fromOptions = new Intl.Locale("sl", { variants: "rozaj-biske" });
console.log(fromOptions.variants); // "rozaj-biske"

#参考文献