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

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

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

Rachel Andrew

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

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

ストリームと読み取り可能なバイトストリームを変換する

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

対応ブラウザ

ソース

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

対応ブラウザ

ソース

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

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

対応ブラウザ

ソース

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

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

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

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

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

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

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

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

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

@media (width >= 400px) { … }

対応ブラウザ

ソース

Region Capture API

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

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

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

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

また、Safari 16 では、grid-template-columns と grid-template-rows の subgrid 値がサポートされています。この機能は Firefox ではすでに実装されており、Chrome では現在開発中です。この機能により、グリッドトラックのサイズをネストされたグリッドに継承できます。

対応ブラウザ

ソース

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

対応ブラウザ

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

対応ブラウザ

ソース

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

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

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

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

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

ストリームと読み取り可能なバイト ストリームを変換する

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

update メディア機能

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

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

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

Region Capture API

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

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

ストリームと読み取り可能なバイトストリームを変換する

`update` メディア機能

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