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

Chrome 110 の新機能

Adriana Jara

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

新しい :picture-in-picture 疑似クラスを使用して、ピクチャーインピクチャー要素にカスタムスタイルを追加できます。
マニフェストで launch_handler を使用して、ウェブアプリの起動動作を設定します。
iframe で credentialless 属性を使用して、クロスオリジンの埋め込みポリシーを設定しなかったサードパーティコンテンツを埋め込む
他にもさまざまな機能があります。

Adriana Jara と申します。Chrome 110 のデベロッパー向けの新機能について詳しく見ていきましょう。

:ピクチャーインピクチャー疑似クラス

Picture-in-Picture API を使用すると、ウェブサイトはフローティング動画ウィンドウを作成できます。このウィンドウは常に最前面に表示されるため、ユーザーは他のコンテンツを操作しながらメディアの視聴を続けられます。

:picture-in-picture CSS 疑似クラスを使用すると、要素にスタイルを追加してエクスペリエンスを向上させることができます。

次のスニペットは、ピクチャーインピクチャークラスを使用して、動画が別の場所で再生されていることをユーザーに知らせるメッセージを動画コンテナに追加する方法を示しています。

#video-container:has(video:picture-in-picture)::before {
  bottom: 36px;
  color: #ddd;
  content: 'Video is now playing in a Picture-in-Picture window';
  position: absolute;
  right: 36px;
}

video 要素で再度疑似クラスを使用して、要素を透明にしてメッセージを正しく表示します。

サンプルを試して、ピクチャーインピクチャー動画のエクスペリエンスを改善しましょう。

launch_handler マニフェストメンバー。

Launch Handler API を使用すると、ウェブアプリの起動方法を制御できます。たとえば、既存のウィンドウを使用するか、新しいウィンドウを使用するか、選択したウィンドウを起動 URL に移動させるかどうかなどを指定できます。

例を見てみましょう。デスクトップ環境でアプリをインストールしてからブラウザにアクセスすると、スタンドアロンのアプリウィンドウに移動するボタンがあります。これまでは、アプリを新しいウィンドウで起動するしかありませんでした。

launch_handler マニフェストメンバーのウェブアプリを使用して、起動動作をカスタマイズできるようになりました。

たとえば、以下のスニペットは、このウェブアプリのすべての起動で、常に新しいウィンドウを起動する代わりに、既存のアプリウィンドウにフォーカスして移動します（存在する場合）。

{
 "launch_handler": {
   "client_mode": "navigate-new"
 }
}

`credentialless` 個の iframe

クロスオリジン分離における最大の課題の 1 つは、すべてのクロスオリジン iframe で COEP と CORP をデプロイする必要があることです。これらのヘッダーのない iframe は、ブラウザによって読み込まれません。

credentialless 属性は、これらのヘッダーを設定しない場合のサードパーティ iframe を埋め込む際に役立ちます。

credentialless を使用すると、iframe は別の空のコンテキストから読み込まれます。特に、Cookie なしで読み込まれます。iframe は空の Cookie ジャーから始まります。

同様に、LocalStorage や CacheStorage などのストレージ API は、新しいエフェメラルパーティションにデータを読み込んで保存します。最上位ドキュメントがアンロードされると、このストレージはすべて消去されます。これにより、COEP の制限を削除できます。

credentialless を安全に使用してサードパーティのコンテンツを iframe に読み込む方法については、こちらの記事をご覧ください。

その他

もちろん、他にもたくさんのことがあります。

セキュアでないコンテキストでの WebSQL が削除されました。

CSS の initial-letter プロパティを使用すると、最初の文字を次の行に配置する行数を設定できます。

FileSystemHandle に remove() メソッドが追加されました。

Chrome 110 の新機能

:ピクチャー イン ピクチャー疑似クラス

launch_handler マニフェスト メンバー。

credentialless 個の iframe

その他

関連情報

登録

:ピクチャーインピクチャー疑似クラス

launch_handler マニフェストメンバー。

`credentialless` 個の iframe