Chrome 130

#CSS Nesting の挙動変更

CSS Nesting の挙動が変更された。 今までは、宣言のホイスティングが行われなれていたが、Chrome 130 からは行われなくなる。

https://web.dev/blog/css-nesting-cssnesteddeclarations?hl=en

#Document Picture-in-Picture

preferInitialWindowPlacementオプションが追加された。

これを指定すると、以前のウィンドウの位置やサイズを再利用するのではなく、ピクチャー イン ピクチャー ウィンドウを常にデフォルトの位置とサイズで開くように 指示できる。

Open

Document Picture-in-Picture API は、次のように利用できる。

const player = document.querySelector("#player");

const pipWindow = await documentPictureInPicture.requestWindow({
  preferInitialWindowPlacement: true,
});

pipWindow.document.body.append(player);

pipWindow.addEventListener("unload", (event) => {
  const pipPlayer = event.target.querySelector("#player");
  playerContainer.append(pipPlayer);
});

#box-decoration-break

box-decoration-break がサポートされた。

値にはsliceとcloneがあり、sliceはデフォルトで、cloneは次のように断片化された要素が個別に描画される。

The
quick
orange fox