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

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

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

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

Browser Support

  • Chrome: 120.
  • Edge: 120.
  • Firefox: 130.
  • Safari: 17.2.

自動アニメーション(その他)

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

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

Browser Support

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

Source

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

Browser Support

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

Source

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

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

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

Browser Support

  • Chrome: 129.
  • Edge: 129.
  • Firefox Technology Preview: supported.
  • Safari: 16.4.

Source

WebCodecs API

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

Browser Support

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

Source

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

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

Browser Support

  • Chrome: 111.
  • Edge: 111.
  • Firefox: not supported.
  • Safari: 18.

Source

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

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

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

Browser Support

  • Chrome: 111.
  • Edge: 111.
  • Firefox: not supported.
  • Safari: 18.

Source

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

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

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

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

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

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