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

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

6 月に、Chrome 103Firefox 102 が安定版になりました。

Firefox 102 では、Transform Streams がサポートされています。これにより、ReadableStream から WritableStream へのパイピングが可能になり、チャンクに対して変換が実行されます。この機能が 3 つのエンジンすべてで利用可能になったので、この機会に ストリームについて学習することをおすすめします。

対応ブラウザ

  • Chrome: 67。
  • Edge: 79.
  • Firefox: 102.
  • Safari: 14.1。

ソース

Firefox 102 では、読み取り可能なバイト ストリームもサポートされるようになりました。これにより、ReadableStreamBYOBReader インターフェースで BYOB(独自のバッファを使用する)リーダーが可能になります。これは、デベロッパーが提供するデータをストリーミングするために使用できます。

対応ブラウザ

  • Chrome: 89。
  • Edge: 89.
  • Firefox: 102.
  • Safari: サポートされていません。

ソース

ローカルにインストールされたフォントにアクセスする

Chrome 103 には、ユーザーがローカルにインストールしたフォントへのアクセスを可能にする Local Font Access API が含まれています。デバイスにインストールされているフォントへのアクセスをリクエストしたら、window.queryLocalFonts() を呼び出して、インストールされているフォントの配列を取得します。

const pickedFonts = await window.queryLocalFonts();
for (const fontData of pickedFonts) {
  console
.log(fontData.postscriptName);
  console
.log(fontData.fullName);
  console
.log(fontData.family);
  console
.log(fontData.style);
}

update メディア機能

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

対応ブラウザ

  • Chrome: 113。
  • Edge: 113.
  • Firefox: 102.
  • Safari: 17。

ソース

新しい HTTP ステータス コード - 103 早期ヒント

Chrome 103 では、新しいステータス コード HTTP 103 Early Hints が追加されます。サーバーや CDN は、ページの読み込みに特定のサブリソース セットが必要であると認識している場合、オリジンに事前接続することや、必要なページが届いたときにリソースをプリロードするようブラウザに指示できます。この機能を利用するには、サーバーまたは CDN を更新する必要があります。早期ヒントの詳細をご覧ください。

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

ブラウザのベータ版では、ブラウザの次期安定版に搭載される機能のプレビューを確認できます。リリース前に、サイトに影響する可能性がある新機能や削除内容をテストできます。

4 月の新しいベータ版は、Chrome 104Firefox 103Safari 16 です。

範囲メディアクエリの新しい構文

Chrome 104 には、Media Queries Level 4 仕様で定義された範囲メディアクエリの新しい構文が含まれています。たとえば、以前は次のように記述されていたメディアクエリは、

@media (min-width: 400px) {  }

次のように記述できます。

@media (width >= 400px) {  }

対応ブラウザ

  • Chrome: 104。
  • Edge: 104。
  • Firefox: 102。
  • Safari: 16.4。

ソース

Region Capture API

パソコン版 Chrome 104 には、Region Capture API も含まれています。これにより、キャプチャした動画を共有する前に、動画のコンテンツを切り抜いたり削除したりできます。

Safari 16 では、ブラウザにいくつかの重要な機能が追加されています

Safari 16 は、Safari チームによるまたひとつエキサイティングなリリースになりそうです。今回のリリースでは、Interop 2022 に含まれる多くの機能が追加されています。この時期にこれほど多くの機能がリリースされることは素晴らしいことです。ここでは、私が気に入っている機能をいくつか紹介しますが、詳細についてはリリースノートをご覧ください。

多くのデベロッパーと同様、コンテナクエリのサイズクエリのサポートが実現することを楽しみにしています。この機能は現在、Chrome でもフラグが設定されています。

Safari 16 では、grid-template-columnsgrid-template-rowssubgrid 値もサポートされています。この機能は、すでに Firefox で開発されており、Chrome で開発中です。この機能を使用すると、グリッド トラックのサイズをネストされたグリッドに継承できます。

対応ブラウザ

  • Chrome: 117。
  • Edge: 117.
  • Firefox: 71.
  • Safari: 16。

ソース

また、グリッド レイアウトでは、グリッド トラックをアニメーション化することもできます。

対応ブラウザ

  • Chrome: 107。
  • Edge: 107.
  • Firefox: 66。
  • Safari: 16。

日付、時刻、色、ファイルのブラウザ ピッカーを表示する標準的な方法を可能にする showPicker() メソッドが含まれています。詳しくは、日付、時刻、色、ファイルのブラウザ選択ツールを表示するをご覧ください。

対応ブラウザ

  • Chrome: 99.
  • Edge: 99.
  • Firefox: 101。
  • Safari: 16。

ソース

display: contentsユーザー補助に関する問題も解決され、アクセシビリティ ツリーから要素が削除される危険性なく、この便利な機能を安全に使用できるようになりました。

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

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