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

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

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

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?」をご覧ください。

Browser Support

Source

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

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

フェッチの優先度は他のブラウザではまだ利用できませんが、今すぐ使用を開始して、Chromium 101 ベースのブラウザを使用しているユーザーにメリットをもたらすことができます。

Browser Support

Source

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

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

Browser Support

Source

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

ブラウザのベータ版では、ブラウザの次期安定版に搭載される予定の機能をプレビューできます。この機会に、サイトに影響を与える可能性のある新機能や削除をテストすることをおすすめします。

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 月にウェブプラットフォームを初めて導入