2024 年 6 月に安定版またはベータ版のウェブブラウザに追加された興味深い機能をいくつかご紹介します。
安定版のブラウザのリリース
2024 年 6 月に、Firefox 127 と Chrome 126 が安定版になりました。この投稿では、ウェブ プラットフォームに追加された新機能を取り上げています。
JavaScript の Set メソッド
セットは、プログラミング言語に不可欠なデータ構造です。これで、JavaScript の組み込みメソッドを使って集合オペレーションを実行できるようになりました。以下の set メソッドは Firefox 127 から利用可能になり、Baseline Newly available の一部になりました。
intersection()union()difference()symmetricDifference()isSubsetOf()isSupersetOf()isDisjointFrom()
詳しくは、JavaScript の Set メソッドがベースラインに統合されましたをご覧ください。
Async Clipboard API
Firefox 127 以降、クリップボード API が完全にサポートされるようになりました。Firefox では、ClipboardItem インターフェースと、クリップボード インターフェースの read() メソッドと write() メソッドがサポートされるようになりました。Clipboard API の詳細については、クリップボードへのアクセスのブロックを解除するをご覧ください。
CSS グラデーションの色補間
CSS グラデーションは <color-interpolation-method> を受け入れるよう指定されていますが、これは Firefox でもサポートされるようになりました。これにより、すべての主要なエンジンで相互運用できます。たとえば、hsl カラーシステムとより長い補間を使用して linear-gradient() を指定できるようになりました。
.longer {
background: linear-gradient(90deg in hsl longer hue, red, blue);
}
対応ブラウザ
- 111
- 111
- 127
- 16.2
ドキュメント間のビュー遷移
以前は、View Transitions API を使用するには、ウェブサイトを SPA に再構築する必要がありました。これは廃止されました。Chrome 126 以降、同一オリジン ナビゲーションでビュー遷移がデフォルトで有効になりました。同一オリジンの 2 つのドキュメント間でビュー移行を作成できます。
ドキュメント間のビュー移行を有効にするには、双方でオプトインする必要があります。
これを行うには、@view-transition at-rule を使用し、ナビゲーション記述子を auto に設定します。
@view-transition {
navigation: auto;
}
詳しくは、ドキュメント間のビュー遷移のドキュメントをご覧ください。
Gamepad API の trigger-rumble 拡張機能
Chrome 126 では GamepadHapticActuator インターフェースが拡張され、互換性のあるゲームパッドの trigger-rumble 機能がウェブで公開されています。この拡張機能により、Gamepad API を利用するウェブ アプリケーションで、この機能を搭載したゲームパッド デバイスのトリガーも振動できるようになります。
ベータ版ブラウザのリリース
ベータ版のブラウザでは、次の安定版のブラウザで使用できる機能をプレビューできます。一般公開の前に、サイトに影響を及ぼす可能性のある新機能や削除をテストする絶好の機会です。新しいベータ版は Firefox 128、Chrome 127、Safari 18、Safari 17.6 です。このリリースにより、プラットフォームに多くの優れた機能が追加されます。詳細についてはリリースノートをご覧くださいその一部をご紹介します。
Safari 17.6 は既存の機能に対する修正のリリースです。Safari 18 には、スタイル コンテナクエリ、シングルページ アプリ用のビュー移行 API、フレックスボックス プロパティでの safe キーワードのサポートなど、多数の魅力的な新機能が追加されています。
Chrome 127 には、font-size-adjust CSS プロパティ、生成されたコンテンツの代替テキストを任意の数の要素として指定する機能、MediaMetaData で個々の章情報を追加する機能があります。
Firefox 128 には CSS のプロパティと値が含まれており、この機能のベースラインが新たに利用可能になりました。@property を使用して type を定義し、CSS カスタム プロパティの代替値を設定します。