Chrome 125 の新機能

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

  • CSS Anchor Positioning を使用すると、要素のアンカー付けがこれまでになく簡単になります。
  • Compute Pressure API は、使用可能なコンピュータの処理能力を最適化するために役立ちます。
  • Storage Access API が Cookie 以外のストレージにも対応。
  • 他にも多数の機能があります。

Adriana Jara と申します。Chrome 125 でデベロッパー向けに追加された新機能について、詳しく見ていきましょう。

CSS アンカーの配置。

別の要素にアンカーされた要素を表示すると、ポップオーバーをツールチップとして使用し、それを呼び出す要素に適用するなどの UI パターンを作成できます。

CSS アンカー配置を使用すると、絶対位置に配置された要素をページ上の 1 つ以上の要素に宣言的にテザリングできます。JavaScript を必要とせず、アンカーがスクロール可能な場合、効率的に機能します。

アンカーの配置機能は、多数の CSS プロパティで構成されています。主なプロパティは次のとおりです。

  • anchor-name: 他の要素のアンカーとなる要素を設定します。
  • position-anchor: アンカー要素がアンカーの配置に使用する「デフォルト」のアンカーを表します。
  • anchor() 関数: アンカー要素を配置する際のアンカー要素の位置を参照します。
  • inset-area: 一般的な相対位置の省略形。

Compute Pressure API。

Compute Pressure API は、システムの CPU 負荷を表す高レベルの状態を提供します。

コンピュータの処理能力をバランスよく使用するように最適化する場合、API は適切な基盤となるハードウェア指標を使用して、システムが管理不能なストレスを受けていない限り、ユーザーが利用可能なすべての処理能力を活用できるようにします。

Intel が主導して設計と実装を行ったこの API により、ビデオ会議アプリは機能とパフォーマンスを動的にバランスさせることができます。

サンプルと詳細については、Compute Pressure API をご覧ください。

Storage Access API(SAA)が Cookie 以外のストレージに拡張されました。

Storage Access API は、クロスサイト Cookie の代替として作成された JavaScript API です。クロスサイト リソースの読み込みに依存する埋め込みで、必要に応じてユーザーにアクセス権をリクエストします。

このバージョンには、Cookie 以外の API を使用するための拡張機能が含まれています。この拡張機能を使用すると、サードパーティのコンテキストでパーティション分割されていない Cookie と Cookie 以外のストレージ(indexedDB や localstorage など)にアクセスできます。次のコードは、indexedDB へのアクセスをリクエストする例を示しています。

// Request a new storage handle via rSA (this may prompt the user)
let handle = await document.requestStorageAccess({indexedDB : true});

// Open or create an indexedDB that is shared with the 1P context
let messageDB = handle.indexedDB.open("messages");

その他

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

リリースノート全体

関連情報

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

登録

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

Adriana Jara と申します。Chrome 126 がリリースされ次第、Chrome の新機能についてお知らせします。