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

4 月にウェブプラットフォームを初めて導入

2022 年 4 月に Stable 版とベータ版のウェブブラウザ向けに導入された興味深い機能の一部をご紹介します。

Rachel Andrew

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

4 月に Chrome 101 と Firefox 99 が安定版になりました。先月に多くの機能が登場して以来、4 月は少し静かでしたが、いくつかの興味深い機能が追加されました。

Chrome 101 には、hwb カラー表記が含まれています。色相、白さ、黒度に応じて色を指定します。他の色表記と同様に、オプションのアルファコンポーネントで不透明度を指定します。

h1 {
  color: hwb(194 0% 0% / .5) /* #00c3ff with 50% opacity */
}

hwb() について詳しくは、Stefan Judis による記事「hwb() – a color notation for humans?」をご覧ください。

対応ブラウザ

ソース

Chrome 101 には、取得優先度機能も導入されています。これにより、fetchpriority 属性を使用して、リソースをダウンロードする順序をブラウザにヒントとして伝えることができます。以下の例では、優先度の低い画像が fetchpriority="low" で示されています。

<img src="/images/in_viewport_but_not_important.svg" fetchpriority="low" alt="I'm an unimportant image!">

フェッチ優先度は他のブラウザではまだ利用できません。ただし、Chromium 101 ベースのブラウザを使用しているすべてのユーザーがすぐに利用できます。

対応ブラウザ

ソース

Firefox 99 には、Navigator インターフェースの pdfViewerEnabled プロパティが含まれています。このプロパティは、ブラウザが PDF ファイルのインライン表示をサポートしているかどうかを示します。

if (!navigator.pdfViewerEnabled) {
  // The browser does not support inline viewing of PDF files.
}

対応ブラウザ

ソース

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

ブラウザのベータ版では、ブラウザの次期安定版に搭載される機能のプレビューを確認できます。この機会に、サイトに影響を及ぼす可能性のある新機能や削除について、一般公開の前にテストすることをおすすめします。

4 月の新しいベータ版は Chrome 102、Firefox 100、Safari 15.5 です。

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

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

対応ブラウザ

ソース

Chrome 102 には、ユーザーがローカルにインストールしたフォントへのアクセスを可能にする Local Font Access API も含まれています。

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

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

4 月にウェブ プラットフォームを初めて導入

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

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

4 月にウェブプラットフォームを初めて導入