このページは 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;
}

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

サンプルを試して、ピクチャーインピクチャーの動画エクスペリエンスを向上させます。

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 JAR で始まります。

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

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

など多数

他にもたくさんの機能があります。

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

CSS の initial-letter プロパティを使用すると、最初の文字が後続のテキスト行にシンクする行数を設定できます。

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

Chrome 110 の新機能

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

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

credentialless iframe。

など多数

関連情報

登録

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

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

`credentialless` iframe。