Chrome 120 の新機能

Adriana Jara

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

  • CloseWatcher API を使用すると、クローズ リクエストを処理する際に一貫したエクスペリエンスを提供できます。
  • <details> 要素を使用して、アコーディオン パターンを簡単に実装できます。
  • 権限ポリシー違反レポートが利用可能になりました。
  • 他にもたくさんあります。

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

CloseWatcher API。

モーダル コンポーネントやポップアップ コンポーネントの重要な機能は、閉じるための一貫したメカニズムで簡単に閉じることです。これらのメカニズムはクローズ リクエストと呼ばれ、通常、デスクトップ プラットフォームでは ESC キー、Android では「戻る」ジェスチャーまたはボタンです。

ウェブ デベロッパーは、自社のコンポーネントに対するクローズ リクエストを処理する適切な方法がありませんでした。これは特に Android デバイスでは問題になります。Android デバイスでは、「戻る」ジェスチャーに対して単純な閉じる動作を提供するのは非常に複雑です。

Chrome 120 では、クローズ リクエストを直接リッスンして応答するための新しい API である CloseWatcher がソリューションを提供します。また、Android の [戻る] ボタンに応答できるように、新しいクローズ リクエスト フレームワークを使用するための <dialog> と popover="" のアップグレードも含まれています。

CloseWatcher API のデモで、試してみましょう。

<details> name 属性

<details> 要素の name 属性を使用すると、一連の <details> HTML 要素を使用してアコーディオン パターンを簡単に実装できます。

同じ name を持つ複数の <details> 要素は、グループを形成します。この設定では、そのグループ内の最大 1 つの要素を一度に開くことができます。

次に、cookies という名前を共有するグループの例を示します。

<details name="cookies">
  <summary>Chocolate chip</summary>
  Yum yum chocolate chip.
</details>
<details name="cookies">
  <summary>Snickerdoodle</summary>
   Yum yum snickerdoodle.
</details>
<details name="cookies">
  <summary>Maicenitas</summary>
   Yum yum maicenitas.
</details>
<details name="cookies">
  <summary>Sugar cookies</summary>
   Yum yum sugar cookies.
</details>

権限ポリシー違反レポート

権限ポリシー違反のレポートをご利用いただけるようになりました。このレポートには Permissions Policy API が統合されています。Reporting API を使用してブラウザに適用する一連のポリシーを宣言することで、デベロッパーはページ、その iframe、サブリソースで利用できるブラウザ機能を制御できます。Reporting API は、ウェブ アプリケーション用の汎用的なレポート メカニズムを提供します。このメカニズムを使用すると、複数のプラットフォーム機能に基づいてレポートを作成できます。

Permissions Policy API と Reporting API を統合することで、ウェブ デベロッパーは、権限のポリシー違反レポートを送信するエンドポイントを設定できます。これにより、サイト所有者は、フィールドで許可されていない機能がいつリクエストされるかを確認できます。

実装について詳しくは、権限ポリシーによるブラウザ機能の管理をご覧ください。

など多数

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

  • 緩和された CSS ネストの実装では、ネストされたスタイルルールを要素から開始できます。is() でラップしたり、前にアンパサンドが必要になったりすることはありません。

  • Media Session API の enterpictureinpicture アクションを使用すると、ピクチャー イン ピクチャーやドキュメント ピクチャー イン ピクチャー ウィンドウを開くためのアクション ハンドラをウェブサイトで登録できます。

  • Chrome はサードパーティ Cookie のサポート終了に向けて取り組んでいます。1 月にウェブサイトに影響する可能性があるテストが開始されます。サードパーティ Cookie のサポート終了に向けた準備で監査と緩和の手順を行うことが重要です。

関連情報

ここでは、重要なハイライトについてのみ説明します。Chrome 120 で追加される変更については、以下のリンクをご覧ください。

登録

最新情報を入手するには、Chrome Developers YouTube チャンネルに登録してください。新しい動画が公開されるたびに、メール通知が届きます。

Adriana Jara 様、Google のチームは皆様のご健闘を心よりお祈りしています。Chrome 121 がリリースされ次第、Chrome の新機能をお知らせいたします。