編集

Chrome 110

#Chrome #CSS #Picture-in-Picture

#古い Windows OS のサポートが終了

Chrome 110 で、Windows 7/8/8.1 などの OS のサポートが終了しました。 なお 2023 年 1 月に、Microsoft は Windows 7/8/8.1 のほとんどのバージョンのサポートを終了しています。

また最後のサポートバージョンである Chrome 109 へのセキュリティ修正も 2023 年 10 月までとなっています。

R.I.P.

#PIP 擬似クラスのサポート

PIP（Picture in Picture）とは、再生している動画を画面の隅に別ウィンドウで表示する機能です。 PIP を利用している video 要素に対してスタイルを適用できる:picture-in-picture疑似クラスが Chrome 110 でサポートされました。

:picture-in-pictureは:が 1 つだけであり、::afterや::first-letterのような擬似要素ではありません。 PIP で表示される別ウィンドウを表すものではなく、PIP を利用している video 要素を表す点に注意してください。

https://developer.chrome.com/blog/new-in-chrome-110/

Chrome Developers の記事では、PIP モードである video 要素のデフォルトの見た目を上書きするデモが紹介されています。

css
video:picture-in-picture {
  opacity: 0;
}
.video-container {
  background: #000;
  position: relative;
}
.video-container:has(video:picture-in-picture)::before {
  content: "Video is now playing in a Picture-in-Picture window";
  position: absolute;
  right: 36px;
  bottom: 36px;
  color: #ddd;
}

現状、PIP を利用する機会はあまりないかもしれませんが、Chrome 111 では PIP が任意の要素に対して利用できるdocumentPictureInPictureのサポートが予定されており、 今後は利用する機会が増えるかもしれません。

編集