小規模なアップデートだけど、Web制作者は要チェック！ Chrome 141で新しく追加されたCSSとUIに関する機能

10月1日にアップデートされたChrome 141に追加された、CSSとUIに関する新しい機能を紹介します。

前回のアップデートでは10個のCSSの新機能が追加されました（紹介記事）が、今回は小規模なアップデートとなっています。しかし、details要素やネストされたSVG要素の幅と高さなど、Web制作者は要チェックです！

New in Chrome 141
Chrome 141 beta

下記は各ポイントを意訳したものです。
※元サイト様のライセンスに基づいて翻訳しています。基づいてというのは、貢献部分に関して同ライセンスも含みます。

• はじめに
• ARIA通知API
• details要素の祖先表示アルゴリズムをアップデート
• ネストされたsvg要素の幅と高さ

はじめに

10/1にリリースされたChrome 141で3つのCSSとUIに関する新しい機能が追加されました。対象となるChrome 141は、Android、ChromeOS、Linux、macOS、Windowsに適用されます。

以下、その3つの新しいCSSとUIに関する機能を紹介します。

ARIA通知API

ARIA通知APIは、デベロッパーがスクリーンリーダーに読み上げる内容を直接指示するためのJavaScriptメソッドを提供するAPIです。

ariaNotify()を使用すると、ARIAライブリージョンと比較して信頼性とデベロッパーの制御性を向上させ、DOM更新に依存しない変更も通知できるようになります。これにより、動的なWebアプリケーション全体でより一貫性があり、人間工学的にも優れたアクセシビリティ体験を実現できます。

この機能のiframeで使用すると、aria-notify権限ポリシーで制御できます。

details要素の祖先表示アルゴリズムをアップデート

ブラウザが無限ループに陥るのを防ぐために、hidden=until-foundおよびdetails要素の祖先表示アルゴリズムをアップデートしました。

仕様書で最近、hidden=until-foundおよびdetails要素の開示アルゴリズムに若干のアップデートが加えられました。これらのアップデートはChrome 141で適用されています。

ネストされたSVG要素の幅と高さ

Chrome 141では、SVGマークアップとCSSの両方を通じてネストされた<svg>要素に対する表示属性としてwidthとheightの適用をサポートします。この2つのアプローチにより、デベロッパーは複雑なデザイン内でSVG要素をより効率的に管理およびスタイル設定できるようになります。

ネストされた<svg>要素のCSSプロパティがある場合

ネストされた<svg>要素にCSSのプロパティがない場合