2024 年 9 月に安定版またはベータ版のウェブブラウザに追加された興味深い機能の一部をご紹介します。
ブラウザの安定版リリース
2024 年 9 月に、Firefox 130、Safari 18、Chrome 129 が安定版になりました。この記事では、ウェブ プラットフォームに追加された新機能を紹介します。
<details>
の name
属性を使用した排他的アコーディオン
Firefox 130 では、<details>
要素の name
属性がサポートされています。これは <details>
要素をグループ化します。グループ内の要素は一度に 1 つだけ開くことができます。これにより、JavaScript を使用せずに排他的アコーディオンを作成できます。
対応ブラウザ
自動アニメーション(その他)
Chrome 129 では、CSS の interpolate-size
プロパティと calc-size()
関数が追加されます。
CSS interpolate-size
プロパティを使用すると、auto
、min-content
、fit-content
などの CSS 固有のサイズ設定キーワードのアニメーションと遷移をページで有効にできます(これらのキーワードをアニメーション化できる場合)。
CSS calc-size()
関数は calc()
に似た CSS 関数ですが、サポートされているサイズ設定キーワードを 1 つだけ操作することもできます。サポートされているサイズ設定キーワードは、auto
、min-content
、max-content
、fit-content
です。
詳しくは、CSS の height: auto;(およびその他の固有のサイズ設定キーワード)へのアニメーションをご覧ください。
JavaScript で時間の長さをフォーマットする
Chrome 129 には Intl.DurationFormat
も追加されています。これは、複数の言語 / 地域をサポートする「1 時間 40 分 30 秒」などの時間の形式設定方法を提供します。
WebCodecs API
Web Codecs API が Firefox 130 のパソコンでサポートされるようになりました。これにより、ウェブ デベロッパーは動画ストリームの個々のフレームとオーディオのチャンクに低レベルでアクセスできるようになります。新しいインターフェースには、VideoEncoder
、VideoDecoder
、EncodedVideoChunk
、VideoFrame
、VideoColorSpace
があります。この API は、Firefox Android ではまだサポートされていないため、Baseline を新しく利用可能にするものではありませんが、Android では Firefox Nightly がサポートされています。
カスタム プロパティの CSS スタイルクエリ
Safari 18 では、CSS スタイルクエリなど、いくつかの新機能がサポートされています。スタイルクエリを使用すると、再利用可能なスタイルを作成して、グループとして適用できます。たとえば、複数のバリエーションがある再利用可能なコンポーネントがある場合です。
詳しくは、CSS スタイルのクエリをご覧ください。
同じドキュメント ビュー遷移
Safari 18 では、SPA の同じドキュメントビュー遷移もサポートされているため、アプリのさまざまな状態間で視覚的な遷移を作成できます。
詳しくは、同一ドキュメント ビュー遷移をご覧ください。
ベータ版ブラウザのリリース
ブラウザのベータ版では、ブラウザの次の安定版に含まれる機能のプレビューを利用できます。リリース前に、サイトに影響する可能性がある新機能や削除をテストできます。新しいベータ版は、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 は、既存の機能のバグ修正をリリースしたものです。