10 月に初めてウェブ プラットフォームを導入

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

2024 年 10 月に、Firefox 131Firefox 132Safari 18.1Chrome 130 が安定版になりました。この投稿では、ウェブ プラットフォームに追加された新機能について説明します。

Firefox 131 では、同期イテレータ ヘルパーのサポートが追加されました。たとえば、Iterator.prototype.forEach()Iterator.prototype.map() などです。これらのヘルパーを使用すると、中間配列オブジェクトを作成せずにイテレータに対して配列のようなオペレーションを実行できます。中間配列を作成できない非常に大きなデータセットもこれに該当します。

対応ブラウザ

  • Chrome: 122。
  • Edge: 122。
  • Firefox: 131。
  • Safari: サポートされていません。

ソース

テキスト フラグメント

また、Firefox 131 では、CSS ::target-text 疑似要素とともにテキスト フラグメントがサポートされています。

対応ブラウザ

  • Chrome: 89。
  • Edge: 89.
  • Firefox: 131。
  • Safari Technology Preview: サポートされています。

ソース

Cookies Having Independent Partitioned State(CHIPS)

Firefox 131 には、Set-Cookie HTTP ヘッダーの partitioned ディレクティブを使用して、Cookie をパーティション分割ストレージにオプトインできる CHIPS が搭載されています。

対応ブラウザ

  • Chrome: 114。
  • Edge: 114.
  • Firefox: 131。
  • Safari: サポートされていません。

ソース

メディアの最新情報

10 月の 2 回目の Firefox リリースでは、Baseline Newly available に追加される一連のメディア機能が含まれています。Firefox 132 には、HTMLVideoElementrequestVideoFrameCallback() メソッドと cancelVideoFrameCallback() メソッドが含まれています。

対応ブラウザ

  • Chrome: 83。
  • Edge: 83.
  • Firefox: 132.
  • Safari: 15.4。

ソース

また、MediaStreamTrack.getCapabilities() メソッドも含まれています。

対応ブラウザ

  • Chrome: 59.
  • Edge: 12.
  • Firefox: 132。
  • Safari: 11.

ソース

fetchPriority

Fetch Priority API は、ブラウザに対するリソースの相対的な優先度を示します。Firefox 132 以降でサポートされているため、この便利な API はベースラインで新しく利用可能になりました。

詳細については、Fetch Priority API でリソースの読み込みを最適化するをご覧ください。

対応ブラウザ

  • Chrome: 102。
  • Edge: 102。
  • Firefox: 132.
  • Safari: 17.2。

ソース

box-decoration-break の完全サポート

Chrome 130 では、CSS box-decoration-break プロパティが接頭辞なしで完全にサポートされています。これには、ブロックとインラインのフラグメンテーションの clone の値が含まれます。

対応ブラウザ

  • Chrome: 130。
  • Edge: 130。
  • Firefox: 32.
  • Safari: 7

ソース

このプロパティの詳細については、Chrome 130 の box-decoration-break プロパティをご覧ください。

ネストされた宣言ルール

Chrome 130 と Firefox 132 は CSS ネスト宣言をサポートしています。つまり、CSSNestedDeclarations で CSS のネストを改善で説明されているように、ネストされた CSS が正しく解析されます。

対応ブラウザ

  • Chrome: 130。
  • Edge: 130.
  • Firefox: 132.
  • Safari: サポートされていません。

ウェブシリアルの connected 属性と RFCOMM 接続イベント

Chrome 130 では、ブール値の SerialPort.connected 属性が追加されます。シリアルポートが論理的に接続されている場合、この属性は true を返します。

この機能により、ポートが論理的に接続または接続解除されると、Bluetooth RFCOMM シリアルポートがこれらのイベントをディスパッチします。

この機能は、ポートを開かずに Bluetooth RFCOMM シリアルポートが使用可能かどうかをアプリが検出できるようにすることを目的としています。

詳細については、ウェブシリアルでの Bluetooth RFCOMM の更新をご覧ください。

対応ブラウザ

  • Chrome: 130。
  • Edge: サポートされていません。
  • Firefox: サポートされていません。
  • Safari: サポートされていません。

Safari でのユーザー補助の修正

Safari 18.1 は Safari 18 の直後にリリースされ、display: contents に関する問題など、さまざまなユーザー補助に関する問題が修正されています。

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

ブラウザのベータ版では、ブラウザの次の安定版に含まれる機能のプレビューを利用できます。一般公開の前に、サイトに影響を及ぼす可能性のある新機能や削除をテストする絶好の機会です。新しいベータ版は Firefox 133Chrome 131 です。このリリースにより、プラットフォームに多くの優れた機能が追加されます。詳細については、リリースノートをご覧ください。主な機能の一部をご紹介します。

Firefox 133 は、WebCodecs APIImageDecoderImageTrackListImageTrack インターフェースをサポートし、メインスレッドとワーカースレッドからの画像のデコードを可能にします。

Firefox 133 は WorkerNavigator.permissions もサポートしています。

Chrome 131 には、CSS ハイライトの継承が含まれています。::selection::highlight などの CSS ハイライト疑似クラスは、要素チェーンではなく疑似ハイライト チェーンを介してプロパティを継承します。その結果、ハイライトのプロパティを継承するより直感的なモデルが得られます。

また、Chrome 131 では CSS ページ分割メディアの @page マージン ボックスがサポートされるため、ウェブから印刷するときにカスタム ヘッダーとフッターを指定できます。