「Google Chrome 130」安定版リリース、任意の要素をピクチャーインピクチャーに表示させることが可能に

ウェブブラウザ「Google Chrome」の最新安定版であるバージョン130がリリースされました。ムービー以外の要素をピクチャーインピクチャーに表示させる機能が追加されたほか、CSSネストで意図しない順番でCSSが適用されていた問題が修正されています。
New in Chrome 130  |  Blog  |  Chrome for Developers
https://developer.chrome.com/blog/new-in-chrome-130?hl=en
New in Chrome 130: Document Picture-in-Picture, CSS nesting improvements, and more! - YouTube

◆任意の要素をピクチャーインピクチャーで利用可能に
これまではYouTubeなどで再生中のムービーをポップアウトしてピクチャーインピクチャーで再生できていました。Chrome 130からはムービー以外の要素でもピクチャーインピクチャーを利用できるようになります。
例えば、下図のTomodoroアプリではタイマーがピクチャーインピクチャーに表示されるよう実装されています。

Spotifyのウェブプレイヤーもピクチャーインピクチャーに対応しており、曲のお気に入り登録などを含めたコントロールが可能になりました。

ピクチャーインピクチャーを利用するには、下記の通り「documentPictureInPicture.requestWindow()」でウィンドウを作成後、ウィンドウの中に任意のドキュメントを配置すればOK。

◆CSSネストのバグ修正
CSSネストは2023年4月にリリースされたChrome 112で導入された機能で、セレクターが短くなって読みやすくなるほか、ルールを他のルール内に記述できるためモジュール性が向上するなどのメリットがあります。
しかし、一部の構文を使用した時に意図とは異なる挙動をしていました。例えば下記のCSSの場合、メディアクエリはCSSの適用優先度である詳細度を変化させないため、「background-color」の値は最後に記述されている「green」になるべきです。ところが、Chrome 129までは「red」と判定されていました。

Chrome 130でこの問題が解決され、本来の意図通り「同じ詳細度であれば最後の記述が優先」という動作をするようになりました。こうした記述をサイトで使用していた場合には再度チェックが必要とのこと。
◆「box-decoration-break」プロパティをサポート
下図のように、文字に左右の端を丸めた枠線を付ける場合を考えてみます。

これまで、文字を複数の行に分離すると奇妙な外観になってしまっていました。

「box-decoration-break」を使用することで下図のようにそれぞれの行が個別にレンダリングされるようになり、見栄えが良くなります。

◆その他のアップデート
・キーボードでフォーカス可能なスクロールコンテナが登場
・2つのシェーダ出力を1つのフレームバッファに統合できるWebGPUのデュアルソースブレンディングがサポートされる
・Web Serial APIにて「connected」プロパティがサポートされる
また、Google Chrome 130には9件のセキュリティバグフィックスが含まれています。
次期安定版の「Google Chrome 131」は現地時間の2024年11月12日にリリース予定です。
◆フォーラム開設中
本記事に関連するフォーラムをGIGAZINE公式Discordサーバーに設置しました。誰でも自由に書き込めるので、どしどしコメントしてください！Discordアカウントを持っていない場合は、アカウント作成手順解説記事を参考にアカウントを作成してみてください！
• Discord | "動画などのピクチャインピクチャ機能って使ってる？" | GIGAZINE(ギガジン)
https://discord.com/channels/1037961069903216680/1296404404571996181