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

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

2024 年 10 月に、Firefox 131Firefox 132Safari 18.1Chrome 130 が安定版になりました。この記事では、ウェブ プラットフォームに追加された新機能を紹介します。

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

Browser Support

  • Chrome: 122.
  • Edge: 122.
  • Firefox: 131.
  • Safari: not supported.

Source

テキスト フラグメント

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

Browser Support

  • Chrome: 89.
  • Edge: 89.
  • Firefox: 131.
  • Safari: 18.2.

Source

Cookies Having Independent Partitioned State(CHIPS)

Firefox 131 には CHIPS が含まれています。これにより、Set-Cookie HTTP ヘッダーの partitioned ディレクティブを使用して、Cookie をパーティショニング ストレージにオプトインできます。

Browser Support

  • Chrome: 114.
  • Edge: 114.
  • Firefox: 131.
  • Safari: not supported.

Source

メディアの更新

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

Browser Support

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

Source

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

Browser Support

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

Source

fetchPriority

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

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

Browser Support

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

Source

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

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

Browser Support

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

Source

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

ネストされた宣言ルール

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

Browser Support

  • Chrome: 130.
  • Edge: 130.
  • Firefox: 132.
  • Safari: 18.2.

Source

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

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

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

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

詳しくは、ウェブ シリアルの Bluetooth RFCOMM の更新をご覧ください。

Browser Support

  • Chrome: 130.
  • Edge: 130.
  • Firefox: not supported.
  • Safari: not supported.

Source

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 マージン ボックスもサポートされるため、ウェブから印刷するときにカスタムのヘッダーとフッターを指定できます。