このページは Cloud Translation API によって翻訳されました。

2 月にウェブプラットフォームを導入

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

Rachel Andrew

公開日: 2025 年 2 月 28 日

安定版ブラウザリリース

2025 年 2 月に Firefox 135 と Chrome 133 が安定版になりました。この記事では、ウェブプラットフォームに追加された新機能を紹介します。

WebAuthn の機能を確認する

Firefox 135 と Chrome 133 の両方で、PublicKeyCredential.getClientCapabilities() 静的メソッドのサポートが追加されました。これにより、ブラウザのスニッフィングに頼ることなく、ブラウザが Web Authentication API の機能をサポートしているかどうかを確認できます。

Browser Support

Source

Firefox 135 には、ソース付き JSON 解析プロポーザルの機能（JSON.parse reviver パラメータ context 引数、JSON.isRawJSON()、JSON.rawJSON()）も含まれています。

Browser Support

Source

Chrome 133 では、popover 属性に 3 つ目の値 popover="hint" が追加されます。ヒントは、ほとんどの場合「ツールチップ」タイプの動作に関連付けられますが、動作は若干異なります。既存の自動ポップオーバーのスタックが開いたまま、無関係なヒントポップオーバーを開けるようになりました。

典型的な例は、<select> 選択ツールが開いている（popover="auto"）状態で、ホバーによってトリガーされるツールチップ（popover="hint"）が表示されている場合です。この操作で <select> 選択ツールは閉じません。

Browser Support

詳しくは、ポップオーバー = ヒントをご覧ください。

CSS の高度な `attr()` 関数

Chrome 133 では、CSS の追加機能がいくつか追加されています。この Chrome リリースには、CSS レベル 5 で指定されている attr() の拡張が含まれています。これにより、<string> 以外の型が許可され、すべての CSS プロパティで使用できるようになります（疑似要素コンテンツの既存のサポートに加えて）。

Browser Support

詳しくは、CSS attr() のアップグレードをご覧ください。

CSS スクロール状態のコンテナクエリ

Chrome 133 では、コンテナクエリを使用して、スクロール状態に基づいてコンテナの子孫にスタイルを適用します。

クエリコンテナは、スクロールコンテナ、またはスクロールコンテナのスクロール位置の影響を受ける要素のいずれかです。クエリ可能な状態は次のとおりです。

stuck: スティッキーに配置されたコンテナがスクロールボックスのいずれかの端に固定されています。
snapped: スクロールスナップが適用されたコンテナが、現在水平方向または垂直方向にスナップされています。
scrollable: スクロールコンテナをクエリされた方向にスクロールできるかどうか。

また、container-type の新しい値として、コンテナをクエリできる scroll-state があります。

Browser Support

詳しくは、CSS scroll-state() をご覧ください。

CSS `text-box`、`text-box-trim`、`text-box-edge`

Chrome 133 の CSS には、text-box-trim プロパティと text-box-edge プロパティ、text-box ショートカットプロパティも追加されています。これにより、テキストの垂直方向の配置をより細かく制御できるようになります。

Browser Support

この便利なプロパティの詳細については、CSS text-box-trim をご覧ください。

DOM の状態を保持した移動

Chrome 133 では、要素の状態をリセットせずに DOM ツリー内で要素を移動できる DOM プリミティブ（Node.prototype.moveBefore）が追加されました。

削除と挿入ではなく移動する場合、次のような状態が保持されます。

<iframe> 要素は読み込まれたままになります。
アクティブな要素はフォーカスされたままになります。
ポップオーバー、全画面、モーダルダイアログは開いたままになります。
CSS の遷移とアニメーションは続行されます。

Browser Support

`FileSystemObserver` インターフェース

Chrome 133 で追加された FileSystemObserver インターフェースは、ファイルシステムの変更をウェブサイトに通知します。サイトは、ユーザーが以前に権限を付与したファイルとディレクトリの変更を、ユーザーのローカルデバイスまたはバケットファイルシステム（オリジンのプライベートファイルシステム）で検出し、変更タイプなどの基本的な変更情報を通知します。

Browser Support

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

ブラウザのベータ版では、ブラウザの次の安定版に含まれる機能のプレビューを利用できます。リリース前に、サイトに影響する可能性がある新機能や削除をテストできます。新しいベータ版は、Firefox 136、Safari 18.4、Chrome 134 です。今回のリリースでは、プラットフォームに多くの優れた機能が追加されています。詳細については、リリースノートをご覧ください。主な機能は次のとおりです。

最新の Safari ベータ版には、このブラウザが安定した時点でベースラインの新機能として提供される予定の機能など、多数の追加機能と改善が含まれています。たとえば、writing-mode: sideways-rl と writing-mode: sideways-lr、ClipboardItem の supports() 静的メソッド、および Iterator Helpers プロポーザルにあるすべてのリスト。

Safari 18.4 ベータ版と Firefox 136 の両方に Cookie Store API が含まれています。この API は、両方のブラウザがリリースされると、ベースラインとして新規に利用可能になります。

Firefox 136 には、:open と :has-slotted の疑似クラスが含まれています。後者は Chrome 134 にも含まれています。また、Intl.DurationFormat も含まれており、これはベースラインとして新規に利用可能になります。

Chrome 134 には、カスタマイズ可能な <select> 要素、CSS dynamic-range-limit プロパティ、<dialog> 要素の軽い閉じる機能が含まれています。

2 月にウェブ プラットフォームを導入

安定版ブラウザ リリース

WebAuthn の機能を確認する

ポップオーバー属性のヒント値

CSS の高度な attr() 関数

CSS スクロール状態のコンテナクエリ

CSS text-box、text-box-trim、text-box-edge

DOM の状態を保持した移動

FileSystemObserver インターフェース

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

2 月にウェブプラットフォームを導入

安定版ブラウザリリース

CSS の高度な `attr()` 関数

CSS `text-box`、`text-box-trim`、`text-box-edge`

`FileSystemObserver` インターフェース