2022 年 4 月に Stable 版とベータ版のウェブブラウザに導入された興味深い機能をいくつかご紹介します。
安定版ブラウザのリリース
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 も含まれています。
これらのベータ版機能は、まもなく安定版のブラウザに実装される予定です。