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

2024 年 9 月に安定版またはベータ版のウェブブラウザに追加された興味深い機能の一部をご紹介します。

Rachel Andrew

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

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

<details> の name 属性を使用した排他的アコーディオン

Firefox 130 では、<details> 要素の name 属性がサポートされています。これは <details> 要素をグループ化します。グループ内の要素は一度に 1 つだけ開くことができます。これにより、JavaScript を使用せずに排他的アコーディオンを作成できます。

対応ブラウザ

  • Chrome: 120。
  • エッジ: 120。
  • Firefox: 130。
  • Safari: 17.2。

自動アニメーション（その他）

Chrome 129 では、CSS の interpolate-size プロパティと calc-size() 関数が追加されます。

CSS interpolate-size プロパティを使用すると、auto、min-content、fit-content などの CSS 固有のサイズ設定キーワードのアニメーションと遷移をページで有効にできます（これらのキーワードをアニメーション化できる場合）。

対応ブラウザ

  • Chrome: 129。
  • Edge: サポートされていません。
  • Firefox: サポートされていません。
  • Safari: サポートされていません。

ソース

CSS calc-size() 関数は calc() に似た CSS 関数ですが、サポートされているサイズ設定キーワードを 1 つだけ操作することもできます。サポートされているサイズ設定キーワードは、auto、min-content、max-content、fit-content です。

対応ブラウザ

  • Chrome: 129。
  • Edge: 129。
  • Firefox: サポートされていません。
  • Safari: サポートされていません。

ソース

詳しくは、CSS の height: auto;（およびその他の固有のサイズ設定キーワード）へのアニメーションをご覧ください。

JavaScript で時間の長さをフォーマットする

Chrome 129 には Intl.DurationFormat も追加されています。これは、複数の言語 / 地域をサポートする「1 時間 40 分 30 秒」などの時間の形式設定方法を提供します。

対応ブラウザ

  • Chrome: 129。
  • Edge: 129。
  • Firefox: サポートされていません。
  • Safari: 16.4。

ソース

WebCodecs API

Web Codecs API が Firefox 130 のパソコンでサポートされるようになりました。これにより、ウェブ デベロッパーは動画ストリームの個々のフレームとオーディオのチャンクに低レベルでアクセスできるようになります。新しいインターフェースには、VideoEncoder、VideoDecoder、EncodedVideoChunk、VideoFrame、VideoColorSpace があります。この API は、Firefox Android ではまだサポートされていないため、Baseline を新しく利用可能にするものではありませんが、Android では Firefox Nightly がサポートされています。

対応ブラウザ

  • Chrome: 94。
  • Edge: 94。
  • Firefox: 130。
  • Safari: 16.4。

ソース

カスタム プロパティの CSS スタイルクエリ

Safari 18 では、CSS スタイルクエリなど、いくつかの新機能がサポートされています。スタイルクエリを使用すると、再利用可能なスタイルを作成して、グループとして適用できます。たとえば、複数のバリエーションがある再利用可能なコンポーネントがある場合です。

対応ブラウザ

  • Chrome: 111.
  • Edge: 111.
  • Firefox: サポートされていません。
  • Safari: 18。

ソース

詳しくは、CSS スタイルのクエリをご覧ください。

同じドキュメント ビュー遷移

Safari 18 では、SPA の同じドキュメントビュー遷移もサポートされているため、アプリのさまざまな状態間で視覚的な遷移を作成できます。

対応ブラウザ

  • Chrome: 111.
  • Edge: 111.
  • Firefox: サポートされていません。
  • Safari: 18。

ソース

詳しくは、同一ドキュメント ビュー遷移をご覧ください。

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

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

Firefox 131 には、新しい JavaScript イテレータ ヘルパーが含まれており、Cookies Having Independent Partitioned State（CHIPS）が有効になりました。

Chrome 130 では、インライン フラグメンテーション（行レイアウト）とブロック フラグメンテーション（印刷とマルチカラムに作成されたフラグメント）の両方で box-decoration-break: clone がサポートされています。また、IndexedDB のエラーレポートが改善され、ウェブシリアル SerialPort インターフェースの新しい connected 属性が追加されました。

Safari 18.1 は、既存の機能のバグ修正をリリースしたものです。