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

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

公開日: 2025 年 4 月 30 日

安定版ブラウザ リリース

2025 年 4 月に、Firefox 137Firefox 138Chrome 135Chrome 136 が安定版になりました。この投稿では、Chrome と Firefox の 2 つのリリースがあった 1 か月間にウェブ プラットフォームに追加された新機能を紹介します。

Chrome にカルーセルが導入

バージョン 135 の Chrome に導入された機能のいくつかにより、ウェブ上でカルーセルなどのページ形式のエクスペリエンスを作成できるようになりました。

::scroll-button() 擬似要素と ::scroll-marker() 擬似要素を使用すると、サイト上のスクロール可能な領域にボタンとマーカーを追加して、ナビゲーション コントロールを追加し、カルーセルを移動する際にユーザーに現在地を示すことができます。

Browser Support

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

Source

列フラグメントにスタイルを適用できる ::column 疑似要素。

Browser Support

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

Source

interactivity プロパティは、要素とそのフラット ツリーの子孫(テキスト行を含む)が非アクティブかどうかを指定します。

Browser Support

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

要素を無効にすると、その要素にフォーカスを当てたり、編集したり、選択したり、ページ内検索で検索したりできるかどうかに影響します。また、ユーザー補助ツリーに表示されるかどうかにも影響します。

詳しくは、CSS を使用したカルーセルをご覧ください。

command 属性と commandfor 属性

Chrome 135 では、command 属性と commandfor 属性も追加されています。これらは popovertargetaction 属性と popovertarget 属性を拡張して置き換えます。これらの新しい属性をボタンに追加することで、ブラウザはシンプルさとユーザー補助に関するコアの問題に対処し、一般的な機能を組み込むことができます。

詳しくは、commandcommandfor の概要をご覧ください。

Browser Support

  • Chrome: 135.
  • Edge: 135.
  • Firefox: behind a flag.
  • Safari Technology Preview: supported.

Source

CSS shape() 関数

Chrome 135 の shape() CSS 関数は、clip-path プロパティと offset-path プロパティのシェイプを定義するために使用されます。レスポンシブ クリッピングで使用する方法をご確認ください。この機能は Safari 18.4 でリリースされ、Firefox Nightly にも含まれています。まもなくベースラインとして利用可能になる予定です。

Browser Support

  • Chrome: 135.
  • Edge: 135.
  • Firefox Technology Preview: supported.
  • Safari: 18.4.

Source

Atomics.pause()

Firefox 137 には Atomics.pause() が含まれているため、この機能はベースラインで新たに利用可能になります。この静的メソッドは、共有リソースへのアクセスを待機している間、呼び出し元がスピンしていることを CPU にヒントするマイクロ待機プリミティブを提供します。これにより、システムは現在のスレッドを放棄することなく、コアまたはスレッドに割り当てられたリソース(電力など)を削減できます。

Browser Support

  • Chrome: 133.
  • Edge: 133.
  • Firefox: 137.
  • Safari: 18.4.

Source

CSS hyphenate-limit-chars

Firefox 137 には、CSS の hyphenate-limit-chars プロパティも含まれています。このプロパティでは、単語のハイフネーションに必要な単語の最小長と、ハイフンの前後の最小文字数を指定します。

Browser Support

  • Chrome: 109.
  • Edge: 109.
  • Firefox: 137.
  • Safari: not supported.

Source

RegExp.escape

RegExp.escape 静的メソッドは数か月以内にすべてのブラウザにリリースされ、Chrome 136 にリリースされるとベースラインの新規利用可能になります。

このメソッドは、文字列内の正規表現の構文文字をエスケープし、RegExp() コンストラクタのリテラル パターンとして安全に使用できる新しい文字列を返します。

Browser Support

  • Chrome: 136.
  • Edge: 136.
  • Firefox: 134.
  • Safari: 18.2.

Source

Error.isError()

Error.isError() 静的メソッドは、渡された値がエラーかどうかを判断します。Firefox 138 に含まれています。すべてのブラウザでブラウザ サポートされていますが、Safari は現在 DOMException インスタンスに対して false を返すため、ベースラインの新規利用可能とは見なされません。

Browser Support

  • Chrome: 134.
  • Edge: 134.
  • Firefox: 138.
  • Safari: 18.4.

Source

FedCM の Login Status API

Firefox 138 は、Federated Credentials Management(FedCM)API を使用する場合に Login Status API をサポートしています。これは、ブラウザ ユーザーが ID プロバイダにログインしているかどうかを設定および確認するために使用されます。Firefox 138 では、NavigatorLogin インターフェース、navigator.login プロパティ、Set-Login HTTP レスポンス ヘッダーがサポートされています。

Browser Support

  • Chrome: 120.
  • Edge: 120.
  • Firefox: 138.
  • Safari: not supported.

Source

Importmap の整合性

Firefox 138 では、<script> 要素の type 属性の importmap 値が integrity キーをサポートするようになりました。これにより、インポートマップで参照されている ES モジュールの URL を、その完全性メタデータと照合できます。この機能は、ベースラインの新規機能として利用可能になりました。

Browser Support

  • Chrome: 127.
  • Edge: 127.
  • Firefox: 138.
  • Safari: 18.

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

ブラウザのベータ版では、ブラウザの次の安定版に含まれる機能のプレビューを利用できます。リリース前に、サイトに影響する可能性がある新機能や削除をテストできます。新しいベータ版は Firefox 139Safari 18.5 です。

Safari 18.5 ベータ版には、18.4 の大規模なリリース後に修正されたバグがいくつか含まれています。

執筆時点では、Firefox のリリースノートはまだ公開されていませんが、ベータ版には Temporal API が含まれているようです。これにより、Firefox は Date のこの改善版をリリースした最初のブラウザとなります。また、<dialog> request.close() の実装も行い、このメソッドをベースラインの「新規に利用可能」にします。