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

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

Rachel Andrew

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

2024 年 3 月に、Firefox 124、Safari 17.4、Chrome 123 が安定版になりました。この投稿では、ウェブ プラットフォームに追加された新機能を取り上げています。

light-dark() でカラーパターンを調整する

light-dark() 色関数は Chrome 123 でリリースされ、ユーザーの設定に合わせてカラーパターンを簡単に調整できるようになりました。次の例では、color-scheme は root で light dark に設定されています。カスタム プロパティは、light-dark() カラー関数を使用して、ユーザーのライトモードまたはダークモードの設定に応じて切り替えられる色を設定します。

:root {
  color-scheme: light dark;
  --primary-color: light-dark(#333, #fafafa);
  --primary-background: light-dark(#e4e4e4, #121212);
  --highlight-color: light-dark(hotpink, lime);
}

その他の例と詳細については、light-dark() を使用した CSS color-scheme 依存の色をご覧ください。

対応ブラウザ

  • Chrome: 123。
  • Edge: 123。
  • Firefox: 120。
  • Safari: 17.5。

ソース

field-sizing による入力管理の強化

また、Chrome 123 では、field-sizing プロパティにより、テキスト入力フィールドの自動拡張が可能になりました。

対応ブラウザ

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

ソース

text-spacing-trim を使用した CJK 句読点のケルニング

Chrome 123 では、text-spacing-trim プロパティにより、中国語、日本語、韓国語（CJK）の句読点文字にケーニングが適用され、スペースが過剰にならないように調整されます。詳しくは、CSS の 4 つの新しい国際機能の導入をご覧ください。

対応ブラウザ

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

ソース

@scope CSS アットルール

Safari 17.4 には @scope が含まれています。これにより、特定の DOM サブツリー内の要素を選択して、オーバーライドしにくい過度に具体的なセレクタを記述することなく、要素を正確にターゲティングできます。また、セレクタを DOM 構造に過度に結合する必要もありません。

詳しくは、CSS @scope アットルールを使用してセレクタの範囲を制限するをご覧ください。

対応ブラウザ

  • Chrome: 118.
  • Edge: 118.
  • Firefox: フラグの背後。
  • Safari: 17.4。

ソース

ピクチャー イン ピクチャーの改善

Chrome 123 には、ピクチャー イン ピクチャーの操作性を向上させる 2 つの機能が追加されています。1 つ目は CSS picture-in-picture の表示モードです。これにより、ウェブアプリ（の一部）がピクチャー イン ピクチャー モードで表示されている場合にのみ適用される特定の CSS ルールを記述できます。

2 つ目の機能では、ドキュメントのピクチャー イン ピクチャー ウィンドウから opener.focus を使用して、ドキュメントのピクチャー イン ピクチャー ウィンドウを所有するタブにシステムレベルのフォーカスを移動できます。

これにより、必要に応じて元のタブをフォアグラウンドに戻すことができます。たとえば、小さいピクチャー イン ピクチャー ウィンドウに収まらない UI エクスペリエンスにユーザーがアクセスする必要がある場合です。

ブロック レイアウトとテーブル レイアウトでの align-content のサポート

Chrome 123 と Safari 17.4 では、ブロック レイアウトとテーブル レイアウトで align-content がサポートされるようになりました。align-content サポートの変更について確認する。

Service Worker 静的ルーティング API

Chrome 123 以降では、Service Worker Static Routing API を使用できます。この API を使用すると、特定のリソースパスをフェッチする方法を宣言的に指定できます。つまり、キャッシュからまたはネットワークから直接レスポンスをフェッチするためだけに Service Worker を実行する必要はありません。

詳しくは、Service Worker の静的ルーティング API を使用して特定のパスのサービス ワーカーをバイパスするをご覧ください。

Long Animation Frames API

Chrome 123 には、Long Animation Frames API も含まれています。これは、Long Tasks API のアップデートであり、ユーザー インターフェース（UI）の更新の遅延をより正確に把握できるようにします。これは、応答性を測定する Core Web Vital 指標である Interaction to Next Paint（INP）に影響する可能性が高い遅いアニメーション フレームや、スムーズさに影響する他の UI ジャンクを特定する場合に役立ちます。

対応ブラウザ

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

ソース

content-visibility プロパティ

Firefox 124 では、CSS の content-visibility プロパティがサポートされています。このプロパティは、要素がコンテンツをレンダリングするかどうかを制御します。これにより、ブラウザはコンテンツが必要になるまでコンテンツのレンダリングを省略できます。

対応ブラウザ

  • Chrome: 85。
  • Edge: 85.
  • Firefox: 125.
  • Safari: 18。

ソース

ArrayBuffer と配列のグループ化の追加

Safari 17.4 では、JavaScript に新機能が追加され、detached プロパティと ArrayBuffer の transfer() メソッドと transferToFixedLength() メソッドがサポートされるようになりました。

対応ブラウザ

  • Chrome: 114。
  • Edge: 114.
  • Firefox: 122。
  • Safari: 17.4。

ソース

Safari 17.4 には、配列のグループ化メソッド Object.groupBy と Map.groupBy も含まれています。配列のグループ化の詳細については、JavaScript に配列のグループ化メソッドが追加されますをご覧ください。

対応ブラウザ

  • Chrome: 117。
  • Edge: 117.
  • Firefox: 119.
  • Safari: 17.4。

ソース

これらの機能は相互運用可能になったため、ベースラインの新規リリースに追加されます。

setHTMLUnsafe、parseHTMLUnsafe

Safari 17.4 に組み込まれている setHTMLUnsafe メソッドと parseHTMLUnsafe メソッドを使用すると、JavaScript から宣言型 Shadow DOM を使用できるようになります。また、これらのメソッドを使用すると、innerHTML や DOMParser と比較して、HTML を DOM に強制的に解析する方法が簡単になります。

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

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

Firefox 125 は、エキサイティングなリリースとなる予定です。 ブロックに align-content が含まれており、この機能を相互運用できます。また、新たに利用可能になったベースラインの一部として、Popover API も追加されています。transition-behavior プロパティもサポートされます。ポップオーバーと transition-behavior は Interop 2024 の一部です。

Chrome 124 には、宣言型シャドウ DOM を JavaScript から使用できるようにする setHTMLUnsafe メソッドと parseHTMLUnsafe メソッドが含まれており、これらの機能を相互運用できるようにしています。また、WebSocketStream API と writingsuggestions 属性も含まれています。