必知事項は次のとおりです。
- CSS Anchor Positioning を使用すると、要素のアンカー付けがこれまでになく簡単になります。
- Compute Pressure API は、使用可能なコンピュータの処理能力を最適化します。
- Storage Access API が Cookie 以外のストレージにも対応。
- 他にも多数の機能があります。
Adriana Jara と申します。Chrome 125 でデベロッパー向けに追加された新機能について、詳しく見ていきましょう。
CSS Anchor Positioning。
別の要素にアンカーされた要素を表示すると、ポップオーバーをツールチップとして使用し、それを呼び出す要素に適用するなどの 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");
その他
もちろん、他にもたくさんあります。
Device Posture API と Viewport Segments Enumeration API のオリジン トライアルがあります。これらの API は、デベロッパーが折りたたみ式デバイスをターゲットに設定できるように設計されています。
CSS のステップ値関数
round()
、mod()
、rem()
が追加され、これらの機能がベースラインの新規利用可能になりましたShared Storage API で、iframe を作成せずにクロスオリジン ワークレットを実行できるようになりました。
関連情報
主なハイライトのみを記載しています。Chrome 125 のその他の変更については、次のリンクをご覧ください。
- Chrome DevTools の新機能(125)
- Chrome 125 に関する ChromeStatus.com の更新
- Chromium ソース リポジトリの変更リスト
- Chrome のリリース カレンダー
登録
最新情報を入手するには、Chrome Developers の YouTube チャンネルにチャンネル登録してください。新しい動画が公開されると、メール通知が届きます。
Adriana Jara と申します。Chrome 126 がリリースされ次第、Chrome の新機能についてお知らせします。