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

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

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

Rachel Andrew

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

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 では、シングルページアプリケーションのクライアントサイドルーティングを標準化する API である 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() メソッドについて言及していましたが、このリリースでは提供されません。

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

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

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

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

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