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 には CHIPS が含まれています。これにより、Set-Cookie
HTTP ヘッダーの partitioned
ディレクティブを使用して、Cookie をパーティショニング ストレージにオプトインできます。
メディアの更新
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
マージン ボックスもサポートされるため、ウェブから印刷するときにカスタムのヘッダーとフッターを指定できます。