Chrome 114 の新機能

Adriana Jara

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

  • CSS text-wrap: balance を使用して、テキストのレイアウトを改善できます。
  • トップレベル サイトごとにパーティショニングされた Cookie（CHIPS）はこちらです。
  • Popover API を使用すると、ポップオーバーをかつてないほど簡単に作成できます。
  • 他にもさまざまな機能があります。

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

text-wrap:balance。

text-wrap: balance を使用してテキスト レイアウトを改善。以下のアニメーションは、この 1 行でどのような違いが生じるかを示しています。

デモを試す

開発者は、最終的なサイズ、フォントサイズ、テキストの言語を把握していません。テキストの折り返しを効果的に処理するには、すべての変数が必要です。ブラウザはすべての要素を把握しているため、text-wrap:balance を使用すると、最適なバランスの行折り返しソリューションをブラウザにリクエストできます。

上記の 2 つの例が一緒に表示されています。1 つはアンバランス、もう 1 つはバランスありとマークされています。

バランスの取れたテキスト ブロックは、読者の目にも優しいものです。注目を集めやすく、全体的に読みやすくなります。

text-wrap: balance の主なユースケースは、広告見出しのバランス調整です。テキストのバランスをとるにはパフォーマンス コストが発生するため、コストを軽減するために、最大 4 行までしか機能しません。

テキスト レイアウトを改善するためのサンプルと詳細については、こちらの記事をご覧ください。

CHIPS: Cookies Having Independent Partitioned State。

CHIPS（Cookies Having Independent Partitioned State）: 新しい Cookie 属性 Partitioned を使用して、トップレベル サイトごとにパーティショニングされたサードパーティ Cookie をオプトインできます。

CHIPS が導入される前は、ユーザーがサイト A にアクセスすると、埋め込まれたサイト C によってユーザーのデバイスに Cookie が設定される可能性がありました。その後、サイト C も埋め込まれているサイト B にユーザーがアクセスした場合、サイト C ではサイト A に設定された同じ Cookie にアクセスできます。これにより、サイト C では、サイト A、サイト B のほか、C が埋め込まれたすべてのサイトでユーザーの閲覧アクティビティを集約できるようになります。

パーティショニングされていない Cookie を含むサイトとストレージを示す図。

クロスサイト トラッキングが問題となっている一方、有効なクロスサイト Cookie が求められており、Cookie のパーティション化によりプライバシーを保護する上記の手法は、このニーズに応えるものです。

CHIPS では、ユーザーがサイト A にアクセスし、サイト C から埋め込まれたコンテンツによって Cookie が Partitioned 属性付きで設定されると、その Cookie は、サイト A に埋め込まれている場合にサイト C で設定された Cookie 専用のパーティション化された格納場所に保存されます。ブラウザでは、トップレベル サイトが A の場合にのみ、その Cookie を送信します。

Cookie を使用したサイトとパーティショニングされたストレージを示す図。

ユーザーが新しいサイト（サイト B など）にアクセスした際、サイト C は、サイト A に C を埋め込んだときに設定された Cookie を受け取りません。

サードパーティ Cookie を段階的に廃止する手順について詳しくは、こちらの記事をご覧ください。

Popover API。

Popover API を使用すると、他のすべてのウェブアプリ UI の上に表示される一時的なユーザー インターフェース（UI）要素を簡単に作成できます。

これには、アクション メニュー、フォーム要素の候補、コンテンツ選択ツール、教師用 UI など、ユーザーが操作できる要素が含まれます。

新しいポップオーバー属性を使用すると、任意の要素を最上位レイヤに自動的に表示できます。つまり、開発者は要素の配置、要素の重ね合わせ、フォーカス、キーボード操作について心配する必要がなくなります。

これは <dialog> 要素に似ていますが、ライトな閉じる動作、ポップオーバーの操作管理、イベントのサポート、モーダル モードがないなど、いくつかの重要な違いがあります。

詳しくは、こちらの記事をご覧ください。

その他

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

  • DevTools では、DWARF サポートを使用して、WebAssembly アプリの C および C++ コードを一時停止してデバッグできます。
  • navigator.bluetooth.requestDevice() の exclusionFilters オプションを使用すると、ウェブ デベロッパーはブラウザ選択ツールから一部のデバイスを除外できます。
  • 背景のぼかしのオリジン トライアルがあります。

関連情報

主なハイライトのみを記載しています。Chrome 114 のその他の変更については、以下のリンクをご覧ください。

登録

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

Chrome 115 がリリースされたら すぐにお知らせします