「Google Chrome 125」安定版リリース、Anchorポジショニングが導入されて別の要素の位置を基準に要素を配置可能に

「Google Chrome 125」安定版リリース、Anchorポジショニングが導入されて別の要素の位置を基準に要素を配置可能に - 画像


ウェブブラウザ「Google Chrome」の最新安定版であるバージョン125がリリースされました。別の要素の位置を基準にして要素を配置できる「Anchorポジショニング」が利用可能になったほか、CPU負荷をアプリに伝えるCompute Pressure APIや数値を丸めたり剰余を求めたりできるCSS関数が導入されています。
New in Chrome 125  |  Blog  |  Chrome for Developers
https://developer.chrome.com/blog/new-in-chrome-125
New in Chrome 125: CSS anchor positioning, Compute Pressure API and more - YouTube

◆CSSでAnchorポジショニングが利用可能に
特定の要素の位置を基準に別の要素の位置を決めることが可能なAnchorポジショニングAPIが導入されました。

「Google Chrome 125」安定版リリース、Anchorポジショニングが導入されて別の要素の位置を基準に要素を配置可能に - 画像


基準となる要素を中心に上下左右のほか、斜めに配置したりはみだす方向を設定したりすることができます。Chrome 125に更新していればデモサイトで動作を確認可能です。

「Google Chrome 125」安定版リリース、Anchorポジショニングが導入されて別の要素の位置を基準に要素を配置可能に - 画像


◆Compute Pressure APIの提供開始
システムのCPU負荷を表す高レベルの状態を提供するAPIとして、Compute Pressure APIがリリースされました。ビデオ会議アプリやゲームアプリなどでの利用が想定されており、負荷の状態に応じて画面の品質を低下させるなどの処置を行えるようになっています。
◆Storage Access APIがCookie以外へのアクセスもサポートするように
Storage Access APIはクロスサイトCookieの代替として導入されたAPIで、iframeなどを通して別のサイトに埋め込まれたコンテンツに対してサードパーティーCookieへのアクセスを提供していました。Chrome 125からはindexedDBやlocalStorageなどCookie以外のストレージへのアクセスも可能になっています。

「Google Chrome 125」安定版リリース、Anchorポジショニングが導入されて別の要素の位置を基準に要素を配置可能に - 画像


◆CSSで「round()」「mod()」「rem()」をサポート
round()関数を使用すると四捨五入や切り捨て・切り上げなど数値を丸めることができ、mod()関数およびrem()関数では剰余を求めることができます。mod()関数は除数の符号を維持し、rem()関数は被除数の符号を維持するという違いがあります。
◆その他のアップデート
・折りたたみデバイス向けのDevice Posture APIおよびViewport Segments APIがオリジントライアル開始
・Shared Storage APIでクロスオリジンワークレットを実行する際にiframeが不要に
なお、次期安定版の「Google Chrome 126」は現地時間の2024年6月11日にリリース予定です。

ジャンルで探す