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

Chrome 116 の新機能

Adriana Jara

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

Document Picture in Picture API を使用して、ユーザーの生産性を向上させる。
DevTools で見つからないスタイルシートをデバッグしやすくなりました
他にもさまざまな機能があります。

Adriana Jara です。Chrome 116 でデベロッパー向けに追加された新機能について詳しく見ていきましょう。

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 の改善がいくつか行われました。

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

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

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

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

コンソールには、問題のあるステートメントを含む正確な行へのリンクが表示されます。

ネットワークパネルの [開始元] 列には、読み込みに失敗したスタイルシートを参照する正確な行へのリンクが常に表示されます。

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

ソースとリクエストへのリンクが表示された [問題] パネル。

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

その他

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

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

Chrome 116 の新機能

Picture-in-Picture API を記述します。

DevTools のスタイルシートがないデバッグを改善しました。

その他

関連情報

登録