Chrome 114 の新機能

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

  • CSS text-wrap: balance を使用すると、テキストのレイアウトを改善できます。
  • トップレベル サイト(CHIPS)で分割された Cookie はこちらです。
  • Popover API により、ポップオーバーがこれまで以上に簡単になりました。
  • 他にもさまざまな機能があります。

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

text-wrap:balance.

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

デモを試す

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

前の 2 つの例を一緒に表示しています。1 つは不均衡、もう 1 つはバランスとしてマークされています。

バランスのとれたテキスト ブロックは、読み手の目を楽にします。注意を引き付けやすくなり、全体的に読みやすくなります。

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

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

CHIPS:Cookie の独立したパーティション状態。

CHIPS(Cookies Perform Independent Partitioned State): 新しい Cookie 属性 Partitioned を使用して、トップレベル サイトによって分割されるサードパーティ Cookie をオプトインできます。

CHIPS の導入前は、ユーザーがサイト A にアクセスすると、埋め込みサイト C がユーザーのマシンに Cookie を設定することができました。このユーザーがサイト B にアクセスし、そのサイトにサイト C が埋め込まれている場合、サイト C はサイト A と同じ Cookie にアクセスできます。これにより、サイト C は、サイト A、サイト B、およびサイト C が埋め込まれているすべてのサイトでのユーザーの閲覧アクティビティを収集できます。

パーティション分割されていない Cookie を使用するサイトとストレージを示す図。

クロスサイト トラッキングは問題ですが、有効なクロスサイト Cookie のニーズもあります。これは、Cookie のパーティショニングにより、プライバシーを保護した方法で実現できます。

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

サイトと Cookie のパーティション分割ストレージを示す図。

ユーザーが新しいサイト(たとえばサイト B)にアクセスしても、サイト C がサイト A に埋め込まれたときに設定された Cookie は送信されません。

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

Popover API。

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

これには、アクション メニュー、フォーム要素の候補、コンテンツ選択ツール、教育用 UI など、ユーザー インタラクティブ要素が含まれます。

新しい POPover 属性を使用すると、任意の要素を最上位レイヤに自動的に表示できます。つまり、デベロッパーは、配置、要素の積み重ね、フォーカス、キーボード操作について心配する必要がなくなります。

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

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

など多数

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

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

関連情報

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

登録

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

Chrome 115 のリリースと同時に Chrome の最新情報をお伝えします