「Google Chrome 133」安定版リリース、テキストの配置調整に役立つ機能が追加される

ウェブブラウザ「Google Chrome」の最新安定版であるバージョン133がリリースされました。テキストの上下の余白を削除して垂直方向の位置をそろえやすくするCSSプロパティなどが追加されています。

Chrome 133  |  Release notes  |  Chrome for Developers
https://developer.chrome.com/release-notes/133

New in Chrome 133  |  Blog  |  Chrome for Developers
https://developer.chrome.com/blog/new-in-chrome-133?hl=en

◆テキストの垂直方向の配置を調節
テキストの垂直方向の配置を指定する際に、テキストの上下に存在する余白が影響して思い通りの配置に調整できないことがあります。text-boxを使うと上下の余白を削除して配置を調整しやすくなります。また、上下いずれか一方の余白のみを削除することもできます。

text-boxの詳細は以下のリンク先で確認できます。

CSS text-box-trim  |  Blog  |  Chrome for Developers
https://developer.chrome.com/blog/css-text-box-trim?hl=ja

◆CSSのattr()関数の機能強化
attr()関数を用いるとHTML要素の属性を取得できます。これまではcontentプロパティでのみattr()関数を利用可能でしたが、すべてのCSSプロパティでattr()関数を使えるようになりました。

◆スクロールに応じたアニメーションをCSSのみで実装可能に
新たなCSSプロパティ「scroll-state()」が追加されたことにより、スクロールに応じて作用するアニメーションをCSSで実装できるようになりました。これまでは「上方向にスクロールした際にヘッダーを表示する」という動作を実現するにはJavaScriptを用いる必要がありましたが、scroll-state()を活用することでCSSのみで実装可能になります。

scroll-state()の詳細は以下のページで解説されています。

CSS scroll-state()  |  Blog  |  Chrome for Developers
https://developer.chrome.com/blog/css-scroll-state-queries?hl=ja

◆その他のアップデート
・タイムラインの性質に関係なくアニメーションの進み具合を管理できるAnimation: overallProgress propertyが追加されました。
・Node.prototype.moveBeforeが追加され、要素の状態をリセットせずにDOMツリー内で要素を移動できるようになりました。
・ファイルシステムの変更をウェブサイトに通知するFileSystemObserverが追加されました。
・PublicKeyCredential.getClientCapabilities()によってユーザーの環境で使用可能なWebAuthn機能を検出できるようになりました。

また、Google Chrome 133には12件のセキュリティバグフィックスが含まれています。

次期安定版の「Google Chrome 134」は現地時間の2025年3月4日にリリース予定です。