Chrome 130 の新機能

Pete LePage

次の説明をお読みください。

• ドキュメントのピクチャー イン ピクチャーを使用すると、ピクチャー イン ピクチャー ウィンドウをより詳細に制御できます。
• CSS ネスト宣言で、いくつかのトリッキーなエッジケースを修正しました。
• 複数行に分割される要素の装飾の動作を指定できます。
• 他にも多数の機能があります。

Pete LePage です。Chrome 130 でデベロッパー向けに新しく追加された機能を見ていきましょう。

ドキュメントのピクチャー イン ピクチャー

ピクチャー イン ピクチャー API は、ブラウザタブから動画をポップアウトして、他のサイトやアプリケーションを操作しながら動画を視聴したい場合に最適です。ただし、動画のみに対応しています。

ドキュメントのピクチャー イン ピクチャー API は、この制限をなくし、コンテンツを制御できるピクチャー イン ピクチャー ウィンドウを作成できるようにします。カスタム動画プレーヤー、ビデオ会議、生産性向上アプリなどに最適です。Spotify のウェブ プレーヤーでの実装は素晴らしいと思います。現在の曲のアートワークと再生コントロールが表示され、曲をお気に入りに追加することもできます。

これを使用するには、新しいドキュメントのピクチャー イン ピクチャー ウィンドウをリクエストします。返された promise は、ピクチャー イン ピクチャー ウィンドウの JavaScript オブジェクトで解決されます。次に、それを使用してウィンドウにコンテンツを追加します。

async function openDPiP() {
  const player = document.querySelector("#player");
  const pipWindow = await documentPictureInPicture
.requestWindow();
  pipWindow.document.body.append(player);
}

pipButton.addEventListener('click', openDPiP);

新しい preferInitialWindowPlacement プロパティを使用すると、Chrome に、前のウィンドウの位置やサイズを再利用するのではなく、常にデフォルトの位置とサイズでピクチャー イン ピクチャー ウィンドウを開くよう指示できます。

// Open a Picture-in-Picture window in its default position / size.
const pipWindow = await documentPictureInPicture.requestWindow({
  preferInitialWindowPlacement: true,
});

詳しくは、François の投稿「Picture-in-Picture for any Element」をご覧ください。

CSS のネストされた宣言

CSS ネストを使用すると、ルールを他のルール内にネストすることで、セレクタを短くし、読みやすくし、モジュール性を高めることができます。CSS ネストは Baseline Newly available で、ほぼ 1 年間利用可能です。

想定どおりに動作しないエッジケースがいくつかありました。たとえば、次の CSS ブロックでは、背景色が最後に指定されている緑色になるはずですが、実際には赤色になります。

.foo {
    width: fit-content;

    @media screen {
        background-color: red;
    }

    background-color: green;
}

このようなエッジケースを解決するため、CSS ワーキング グループはネストされた宣言ルールを導入しました。このルールは Chrome 130 で実装されています。これで、同じ CSS ブロックが期待どおりに緑色の背景になります。裸の宣言とネストされたルールをインターリーブしている場合は、コードを再確認する必要があります。

詳しくは、Bramus の記事 CSS ネストが CSSNestedDeclarations で改善をご覧ください。

box-decoration-break

box-decoration-break CSS プロパティを使用すると、要素のフラグメントが複数行、複数列、または複数ページに分割されたときに、どのようにレンダリングされるかを指定できます。

たとえば、この要素はすべてが 1 行に収まっていると見栄えがよくなります。

コンテンツが複数行に分割されると、背景、ボックス シャドウ、境界線などの装飾が切り取られ、かなり劇的な外観になります。

box-decoration-break: clone を追加すると、各フラグメントが個別にレンダリングされ、見栄えがよくなります。

Baseline ではありませんが、Chrome と Firefox で利用でき、Safari ではベンダー接頭辞が付いています。

.bdb-clone {
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

詳しくは、MDN の box-decoration-break ドキュメントと Rachel の投稿 Chrome 130 の box-decoration-break プロパティをご覧ください。

その他

もちろん、他にもたくさんあります。

• 何度か失敗した末に、キーボード フォーカス可能なスクロール コンテナがようやく実装されます。
• WebGPU でデュアルソース ブレンディングが利用可能に。
• Web Serial に接続済み属性が追加されます。

関連情報

ここでは、主なハイライトの一部のみを取り上げます。Chrome 130 のその他の変更については、以下のリンクをご覧ください。

• Chrome 130 のリリースノート。
• Chrome DevTools の新機能（130）
• Chrome 130 の ChromeStatus.com の更新
• Chromium ソース リポジトリの変更リスト
• Chrome のリリース カレンダー

登録

最新情報を入手するには、Chrome Developers YouTube チャンネルに登録してください。新しい動画が公開されるたびにメール通知が届きます。

Chrome 131 がリリースされたら、すぐに Chrome の新機能をご紹介します。