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

Chrome 116 の新機能

Adriana Jara

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

Document Picture in Picture API を使用して、ユーザーの生産性を高めます。
DevTools での欠落しているスタイルシートのデバッグがより簡単になりました
他にもさまざまな機能があります。

Adriana Jara です。Chrome 116 のデベロッパー向け新機能を詳しく見ていきましょう。

Document Picture-in-Picture API。

Document Picture-in-Picture API を使用すると、任意の HTML コンテンツを入力できる常時オンのウィンドウを開くことができます。

Sintel の予告編動画を再生するピクチャーインピクチャーウィンドウ。 — Document Picture-in-Picture API で作成されたピクチャーインピクチャーウィンドウ（デモ）。

Document Picture-in-Picture API のピクチャーインピクチャーウィンドウは、window.open() を使用して開かれる空白の同一オリジンウィンドウに似ていますが、次のような違いがあります。

ピクチャーインピクチャーウィンドウは、他のウィンドウの上にフロート表示されます。
ピクチャーインピクチャーウィンドウは、開始ウィンドウより長く存続することはありません。
ピクチャーインピクチャーウィンドウは操作できません。
ピクチャーインピクチャーのウィンドウの位置を、ウェブサイトで設定することはできません。

次の HTML は、カスタム動画プレーヤーと、動画プレーヤーをピクチャーインピクチャーウィンドウで開くボタン要素を設定します。

<div id="playerContainer">
  <div id="player">
    <video id="video"></video>
  </div>
</div>
<button id="pipButton">Open Picture-in-Picture window</button>

次の JavaScript は、ユーザーがボタンをクリックして空白のピクチャーインピクチャーウィンドウを開くと、documentPictureInPicture.requestWindow() を呼び出します。返される Promise は、ピクチャーインピクチャーウィンドウの JavaScript オブジェクトで解決されます。動画プレーヤーは、append() を使用してそのウィンドウに移動されます。

pipButton.addEventListener('click', async () => {
  const player = document.querySelector("#player");

  // Open a Picture-in-Picture window.
  const pipWindow = await documentPictureInPicture.requestWindow();

  // Move the player to the Picture-in-Picture window.
  pipWindow.document.body.append(player);
});

詳細と例については、任意の要素のピクチャーインピクチャーをご覧ください。

DevTools にスタイルシートがないデバッグを改善。

DevTools に、欠落しているスタイルシートの問題を特定してデバッグするために、いくつかの改善が行われました。

まず、混乱を最小限に抑えるために、[ソース] > [ページ] ツリーに、正常にデプロイされて読み込まれたスタイルシートのみが表示されるようになりました。

また、[ソース] > [エディタ] で、失敗したステートメント、@import、url()、href ステートメントの横に、インラインエラーツールチップと下線が付き、表示されるようになりました。

下線が引かれたステートメントと [ソース] パネルのツールチップ。

コンソールに、失敗したリクエストへのリンクに加え、読み込みに失敗したスタイルシートを参照している行へのリンクが表示されるようになりました。

コンソールには、問題のある記述のある行へのリンクが表示されます。

[Network] パネルの [Initiator] 列には、読み込みに失敗したスタイルシートを参照する行へのリンクが一貫して入力されます。

[Issues] パネルには、URL の破損、失敗したリクエスト、@import ステートメントの不適切な配置など、スタイルシートの読み込みに関するすべての問題が一覧表示されます。

ソースとリクエストへのリンクを含む [Issues] パネル。

Chrome 116 の DevTools について詳しくは、DevTools の新機能をご覧ください。

など多数

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

モーションパスを使用すると、任意のグラフィカルオブジェクトを配置して、デベロッパーが指定したパスに沿ってアニメーション化できます。
display プロパティと content-visibility プロパティがキーフレームアニメーションでサポートされるようになりました。これにより、CSS のみで終了アニメーションを追加できます。
フェッチ API を Bring Your Own Buffer リーダーと併用できるようになり、ガベージコレクションのオーバーヘッドとコピーが削減され、ユーザーの応答性が向上しました。

Chrome 116 の新機能

Document Picture-in-Picture API。

DevTools にスタイルシートがないデバッグを改善。

など多数

関連情報

登録