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

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

Rachel Andrew

ブラウザの安定版リリース

2024 年 6 月に、Firefox 127 と Chrome 126 が Stable になりました。この記事では、ウェブ プラットフォームに追加された新機能を紹介します。

JavaScript の Set メソッド

セットは、どのプログラミング言語でも不可欠なデータ構造です。これで、JavaScript の組み込みメソッドを使用して集合演算を実行できるようになりました。以下のセットメソッドは Firefox 127 から使用可能になり、ベースラインの新規利用可能機能の一部になりました。

対応ブラウザ

  • Chrome: 122。
  • Edge: 122.
  • Firefox: 127.
  • Safari: 17。

ソース

詳しくは、JavaScript Set メソッドがベースラインの一部になりましたをご覧ください。

Async Clipboard API

Clipboard API が Firefox 127 で完全にサポートされるようになりました。Firefox で、ClipboardItem インターフェースと、クリップボード インターフェースの read() メソッドと write() メソッドがサポートされるようになりました。Clipboard API の詳細については、クリップボード アクセスのブロック解除をご覧ください。

対応ブラウザ

  • Chrome: 76。
  • Edge: 79.
  • Firefox: 127.
  • Safari: 13.1。

ソース

CSS グラデーションの色補間

CSS グラデーションは <color-interpolation-method> を受け入れるように指定されており、Firefox でサポートされるようになりました。これにより、すべての主要なエンジンで相互運用できるようになりました。たとえば、hsl カラーシステムと長い補間を使用して linear-gradient() を指定できるようになりました。

.longer {
  background: linear-gradient(90deg in hsl longer hue, red, blue);
}

対応ブラウザ

  • Chrome: 111.
  • Edge: 111.
  • Firefox: 127.
  • Safari: 16.2。

ドキュメント間のビュー遷移

これまでは、View Transitions API を使用するには、ウェブサイトを SPA に再設計する必要がありました。これは廃止されました。Chrome 126 以降、同じオリジンのナビゲーションに対してビュー遷移がデフォルトで有効になりました。2 つの異なる同一オリジンのドキュメント間でビュー遷移を作成できます。

ドキュメント間のビュー遷移を有効にするには、両端でオプトインする必要があります。これを行うには、@view-transition アットルールを使用して、ナビゲーション記述子を auto に設定します。

@view-transition {
  navigation: auto;
}

対応ブラウザ

  • Chrome: 126。
  • Edge: 126。
  • Firefox: サポートされていません。
  • Safari Technology Preview: サポートされています。

詳細については、ドキュメント間のビュー遷移に関するドキュメントをご覧ください。

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、flexbox プロパティの safe キーワードのサポートなど、魅力的な新機能が多数搭載されています。

Chrome 127 には、font-size-adjust CSS プロパティ、生成されたコンテンツの代替テキストを任意の数の要素として指定する機能、MediaMetaData で個々のチャプター情報を追加する機能が含まれています。

Firefox 128 には CSS プロパティと値が含まれているため、この機能はベースラインで新しく利用可能になりました。@property を使用して type を定義し、CSS カスタム プロパティのフォールバック値を設定します。