2022 年 6 月に安定版とベータ版のウェブブラウザに導入された興味深い機能の一部をご紹介します。
ブラウザの安定版リリース
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
のユーザー補助に関する問題も解決され、アクセシビリティ ツリーから要素が削除される危険性なく、この便利な機能を安全に使用できるようになりました。
これらのベータ版機能はまもなく安定版のブラウザで提供される予定です。
ウェブ初心者向けシリーズの一部