2022 年 5 月に Stable および Beta 版のウェブブラウザに導入された興味深い機能をいくつかご紹介します。
安定版ブラウザのリリース
5 月に、Chrome 102、Safari 15.5、Firefox 100、Firefox 101 が安定版になりました。
Chrome 102 と Safari 15.5 には inert 属性があります。これにより、タブオーダーとユーザー補助ツリーから要素が削除されます（非インタラクティブ要素の場合）。たとえば、現在画面外にある要素や非表示の要素などです。
Chrome 102 では、HTML の hidden 属性に新しい値 until-found が追加されました。これにより、アコーディオン パターンのように、ページの折りたたみ領域内にあるテキストについて、ページ内検索とテキスト フラグメントへのスクロールが可能になります。詳しくは、折りたたまれたコンテンツへのアクセスを hidden=until-found でアクセス可能にするの投稿をご覧ください。
Chrome 102 には、シングルページ アプリケーションでクライアント側のルーティングを標準化する Navigation API が搭載されています。この API は、以前は App History API と呼ばれていました。
Firefox 101 では、作成可能なスタイルシートがサポートされています。サポートには、CSSStyleSheet() コンストラクタ、replace() メソッド、replaceSync() メソッドが含まれます。コンポーザブル スタイルシートを使用すると、Shadow DOM で使用するスタイルシートを簡単に作成できます。次の例では、CSSStyleSheet() コンストラクタを使用してスタイルシートを作成し、replaceSync() メソッドを使用して CSS ルールを追加し、生成されたルールがコンソールに出力されます。
const stylesheet = new CSSStyleSheet();
stylesheet.replaceSync('body { color: red; }');
console.log(stylesheet.rules[0].cssText);
また、Firefox 101 にはメディア機能 prefers-contrast があり、この機能はクロスブラウザで利用できます。
ベータ版ブラウザのリリース
ベータ版ブラウザのバージョンでは、次の安定バージョンのブラウザのプレビュー機能が提供されます。この機会に、自分のサイトがリリースされる前に新しい機能や削除をテストすることをおすすめします。
4 月に新たにベータ版としてリリースされたのは Chrome 103 と Firefox 102 です。
Firefox 102 には、update メディア機能が含まれています。レンダリング後にコンテンツの外観を変更できるかどうかを出力デバイスで確認するために使用されます。指定できる値は次のとおりです。
none- レンダリング後にコンテンツを更新することはできません。（印刷されたドキュメントなど）。
slow- デバイスはコンテンツを更新できますが、遅すぎるため滑らかなアニメーションを表示できません。（電子インク画面など）。
fast- コンテンツは、アニメーションをレンダリングするのに十分な速さで動的に変更されます。（パソコンやスマートフォンの画面など）。
Chrome 103 には、ユーザーのローカルにインストールされているフォントにアクセスできる Local Font Access API が含まれています。
これらのベータ版機能は、まもなく安定版のブラウザに実装される予定です。
編集: この投稿の以前のバージョンには Element.isVisible() メソッドが含まれていましたが、このリリースではリリースされません。