2024 年 10 月に安定版とベータ版のウェブブラウザに導入された興味深い機能をご紹介します。
ブラウザの安定版リリース
2024 年 10 月に、Firefox 131、Firefox 132、Safari 18.1、Chrome 130 が安定版になりました。この投稿では、ウェブ プラットフォームに追加された新機能について説明します。
同期イテレータ ヘルパー
Firefox 131 では、同期イテレータ ヘルパーのサポートが追加されました。たとえば、Iterator.prototype.forEach() や Iterator.prototype.map() などです。これらのヘルパーを使用すると、中間配列オブジェクトを作成せずにイテレータに対して配列のようなオペレーションを実行できます。中間配列を作成できない非常に大きなデータセットもこれに該当します。
テキスト フラグメント
また、Firefox 131 では、CSS ::target-text
疑似要素とともにテキスト フラグメントがサポートされています。
Cookies Having Independent Partitioned State(CHIPS)
Firefox 131 には、Set-Cookie
HTTP ヘッダーの partitioned
ディレクティブを使用して、Cookie をパーティション分割ストレージにオプトインできる CHIPS が搭載されています。
メディアの最新情報
10 月の 2 回目の Firefox リリースでは、Baseline Newly available に追加される一連のメディア機能が含まれています。Firefox 132 には、HTMLVideoElement
の requestVideoFrameCallback()
メソッドと cancelVideoFrameCallback()
メソッドが含まれています。
また、MediaStreamTrack.getCapabilities()
メソッドも含まれています。
fetchPriority
Fetch Priority API は、ブラウザに対するリソースの相対的な優先度を示します。Firefox 132 以降でサポートされているため、この便利な API はベースラインで新しく利用可能になりました。
詳細については、Fetch Priority API でリソースの読み込みを最適化するをご覧ください。
box-decoration-break
の完全サポート
Chrome 130 では、CSS box-decoration-break
プロパティが接頭辞なしで完全にサポートされています。これには、ブロックとインラインのフラグメンテーションの clone
の値が含まれます。
このプロパティの詳細については、Chrome 130 の box-decoration-break プロパティをご覧ください。
ネストされた宣言ルール
Chrome 130 と Firefox 132 は CSS ネスト宣言をサポートしています。つまり、CSSNestedDeclarations
で CSS のネストを改善で説明されているように、ネストされた CSS が正しく解析されます。
対応ブラウザ
ウェブシリアルの connected
属性と RFCOMM 接続イベント
Chrome 130 では、ブール値の SerialPort.connected
属性が追加されます。シリアルポートが論理的に接続されている場合、この属性は true を返します。
この機能により、ポートが論理的に接続または接続解除されると、Bluetooth RFCOMM シリアルポートがこれらのイベントをディスパッチします。
この機能は、ポートを開かずに Bluetooth RFCOMM シリアルポートが使用可能かどうかをアプリが検出できるようにすることを目的としています。
詳細については、ウェブシリアルでの Bluetooth RFCOMM の更新をご覧ください。
対応ブラウザ
Safari でのユーザー補助の修正
Safari 18.1 は Safari 18 の直後にリリースされ、display: contents
に関する問題など、さまざまなユーザー補助に関する問題が修正されています。
ベータ版ブラウザのリリース
ブラウザのベータ版では、ブラウザの次の安定版に含まれる機能のプレビューを利用できます。一般公開の前に、サイトに影響を及ぼす可能性のある新機能や削除をテストする絶好の機会です。新しいベータ版は Firefox 133 と Chrome 131 です。このリリースにより、プラットフォームに多くの優れた機能が追加されます。詳細については、リリースノートをご覧ください。主な機能の一部をご紹介します。
Firefox 133 は、WebCodecs API の ImageDecoder
、ImageTrackList
、ImageTrack
インターフェースをサポートし、メインスレッドとワーカースレッドからの画像のデコードを可能にします。
Firefox 133 は WorkerNavigator.permissions
もサポートしています。
Chrome 131 には、CSS ハイライトの継承が含まれています。::selection
や ::highlight
などの CSS ハイライト疑似クラスは、要素チェーンではなく疑似ハイライト チェーンを介してプロパティを継承します。その結果、ハイライトのプロパティを継承するより直感的なモデルが得られます。
また、Chrome 131 では CSS ページ分割メディアの @page
マージン ボックスがサポートされるため、ウェブから印刷するときにカスタム ヘッダーとフッターを指定できます。