2022 年 6 月に Stable 版と Beta 版のウェブブラウザにリリースされた興味深い機能をいくつかご紹介します。
安定版ブラウザのリリース
6 月に Chrome 103 と Firefox 102 が安定版になりました。
ストリームと読み取り可能なバイト ストリームを変換する
Firefox 102 は、変換ストリームをサポートしています。これにより、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 には、メディアクエリ レベル 4 の仕様から、範囲メディアクエリの新しい構文が追加されています。たとえば、次のようにメディアクエリを記述したとします。
@media (min-width: 400px) { … }
この場合、次のように記述できます。
@media (width >= 400px) { … }
リージョン キャプチャ API
パソコンの Chrome 104 には、Region Capture API も含まれています。これにより、撮影した動画からコンテンツを切り抜いたり削除したりしてから、共有できます。
Safari 16 でブラウザの主な機能が向上
Safari 16 は、Safari チームからリリースされたエキサイティングな新たなリリースのようです。このリリースでは、相互運用 2022 に含まれる多くの機能が追加されています。今年の半ばに多くの機能がリリースされたのは素晴らしいことです。ここでは、特におすすめの機能をいくつか紹介します。詳しくはリリースノートをご覧ください。
多くのデベロッパーとともに、コンテナクエリでサイズクエリがサポートされることをとても嬉しく思っています。この機能は、現在 Chrome でもすでに開発されています。
また、Safari 16 では grid-template-columns と grid-template-rows の subgrid 値がサポートされています。この機能はすでに Firefox で採用されており、Chrome で開発中です。これにより、グリッド トラックのサイズをネストされたグリッドに継承できます。
グリッド レイアウトには、グリッド トラックをアニメーション化する機能もあります。
対応ブラウザ
- 107
- 107
- 66
- 16
日付、時刻、色、ファイルのブラウザ選択ツールを表示する正規の方法を可能にする showPicker() メソッドが含まれています。詳しくは、日付、時刻、色、ファイルのブラウザ選択ツールを表示するをご覧ください。
display: contents のユーザー補助の問題も対処され、ユーザー補助ツリーから要素が削除される危険性なく、この便利な機能を安全に使用できるようになりました。
これらのベータ版機能は、まもなく安定版のブラウザに実装される予定です。