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

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

Rachel Andrew

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

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

<details> の name 属性との排他的アコーディオン

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

対応ブラウザ

  • Chrome: 120。 <ph type="x-smartling-placeholder">
  • エッジ: 120。
  • Firefox: 130。 <ph type="x-smartling-placeholder">
  • Safari: 17.2。 <ph type="x-smartling-placeholder">

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

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

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

対応ブラウザ

  • Chrome: 129。 <ph type="x-smartling-placeholder">
  • Edge: サポートされていません。 <ph type="x-smartling-placeholder">
  • Firefox: サポートされていません。
  • Safari: サポートされていません。

ソース

CSS calc-size() 関数は calc() に類似した CSS 関数ですが、 サポートされている 1 つのサイズ設定キーワードだけに対するオペレーションもサポートしています。 サポートされているサイズ設定キーワードは、auto、min-content、max-content、fit-content です。

対応ブラウザ

  • Chrome: 129。 <ph type="x-smartling-placeholder">
  • Edge: 129。
  • Firefox: サポートされていません。 <ph type="x-smartling-placeholder">
  • Safari: サポートされていません。

ソース

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

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

また、Chrome 129 には Intl.DurationFormat があり、フォーマット方法を提供します。 「1 時間 40 分 30 秒」のように複数の言語 / 地域を設定できます。

対応ブラウザ

  • Chrome: 129。
  • Edge: 129。 <ph type="x-smartling-placeholder">
  • Firefox: サポートされていません。 <ph type="x-smartling-placeholder">
  • Safari: 16.4。 <ph type="x-smartling-placeholder">

ソース

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。 <ph type="x-smartling-placeholder">
  • Safari: 16.4。

ソース

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

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

対応ブラウザ

  • Chrome: 111。
  • Edge: 111。
  • Firefox: サポートされていません。
  • Safari: 18。 <ph type="x-smartling-placeholder">

ソース

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

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

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

対応ブラウザ

  • Chrome: 111。
  • Edge: 111. <ph type="x-smartling-placeholder">
  • Firefox: サポートされていません。
  • Safari: 18。 <ph type="x-smartling-placeholder">

ソース

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

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

ベータ版のブラウザでは、次の新機能をプレビューできます。 ブラウザの安定バージョンです。リリース前に、サイトに影響する可能性がある新機能や削除をテストできます。新規 ベータ版は 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 は、既存の機能に対するバグ修正のリリースです。