このページは Cloud Translation API によって翻訳されました。

5 月にウェブプラットフォームを導入

2022 年 5 月に安定版とベータ版のウェブブラウザに搭載された興味深い機能をご紹介します。

Rachel Andrew

安定版ブラウザのリリース

5 月には、Chrome 102、Safari 15.5、Firefox 100、Firefox 101 が安定版になりました。

Chrome 102 と Safari 15.5 には、inert 属性が含まれています。これにより、インタラクティブでない要素がタブオーダーとアクセシビリティツリーから削除されます。たとえば、現在画面外にある要素や非表示になっている要素などです。

Browser Support

Source

Chrome 102 には、HTML hidden 属性の新しい値 until-found が含まれています。これにより、アコーディオンパターンなどで見られるように、ページ内の折りたたみ領域内のテキストでページ内検索とテキストフラグメントへのスクロールが可能になります。詳しくは、投稿記事「hidden=until-found を使用して折りたたみコンテンツにアクセスできるようにする」をご覧ください。

Chrome 102 では、シングルページアプリケーションのクライアントサイドルーティングを標準化する API である Navigation API がリリースされます。この API は以前はアプリ履歴 API と呼ばれていました。

Browser Support

Source

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);

Browser Support

Source

Firefox 101 では、prefers-contrast メディア機能も追加され、この機能がクロスブラウザで利用できるようになりました。

Browser Support

Source

ベータ版ブラウザのリリース

ブラウザのベータ版では、ブラウザの次期安定版に含まれる予定の機能をプレビューできます。この期間は、サイトに影響を与える可能性のある新機能や削除を、世界にリリースされる前にテストする絶好の機会です。

4 月にリリースされた新しいベータ版は、Chrome 103 と Firefox 102 でした。

Firefox 102 には update メディア機能が含まれています。これは、出力デバイスがコンテンツのレンダリング後に外観を変更できるかどうかをクエリするために使用されます。次の値を受け入れます。

none: レンダリングされたコンテンツは更新できません。たとえば、印刷されたドキュメントなどです。
slow: デバイスはコンテンツを更新できますが、スムーズなアニメーションを表示するには遅すぎます。たとえば、電子インクスクリーンなどです。
fast: コンテンツは動的に変更でき、アニメーションをレンダリングするのに十分な速さで変更できます。（パソコンやスマートフォンの画面など）。

Browser Support

Source

Chrome 103 には、ユーザーがローカルにインストールしたフォントにアクセスできる Local Font Access API が含まれています。

これらのベータ版機能は、まもなく安定版ブラウザに導入される予定です。

編集: この投稿の以前のバージョンには、このリリースでは提供されない Element.isVisible() メソッドに関する記述が含まれていました。

ウェブ初心者向けシリーズの一部

5 月にウェブ プラットフォームを導入 コレクションでコンテンツを整理 必要に応じて、コンテンツの保存と分類を行います。

安定版ブラウザのリリース

ベータ版ブラウザのリリース

5 月にウェブプラットフォームを導入