このページは Cloud Translation API によって翻訳されました。

Chrome 130 の新機能

Pete LePage

必知事項は次のとおりです。

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

Pete LePage と申します。Chrome 130 のデベロッパー向けの新機能について詳しく見てみましょう。

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

ピクチャーインピクチャー API は、ブラウザタブから動画をポップアウトして、他のサイトやアプリを操作しながら動画を監視する場合に便利です。ただし、動画のみです。

Spotify のピクチャーインピクチャーウィンドウ

ドキュメントのピクチャーインピクチャー 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 の投稿「あらゆる要素のピクチャーインピクチャー」をご覧ください。

CSS のネストされた宣言

CSS のネストを使用すると、ルールをネストすることで、セレクタを短くして読みやすくし、モジュール性を高めることができます。CSS ネスティングはベースラインで新しく利用可能で、ほぼ 1 年間利用可能になっています。

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

.foo {
    width: fit-content;

    @media screen {
        background-color: red;
    }

    background-color: green;
}

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

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

`box-decoration-break`

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

改行なし

たとえば、この要素はすべて 1 行に収めると見栄えがよく、

スライスを使用した改行

コンテンツが複数行に分割されると、背景、ボックスシャドウ、ボーダーなどの装飾がスライスされ、かなり大胆な外観になります。

クローンを使用した改行

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

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

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

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

その他

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

何度か試行錯誤した後、キーボードでフォーカス可能なスクロールコンテナがようやくリリースされました。
WebGPU がデュアルソースブレンディングを取得。
ウェブシリアルには接続済み属性が付与されます。

Chrome 130 の新機能

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

CSS のネストされた宣言

box-decoration-break

その他

関連情報

登録

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

`box-decoration-break`