2024 年 3 月に安定版およびベータ版のウェブブラウザでリリースされた、興味深い機能をいくつかご紹介します。
安定版ブラウザのリリース
2024 年 3 月に、Firefox 124、Safari 17.4、Chrome 123 が安定版になりました。この投稿では、ウェブ プラットフォームに追加された新機能を紹介します。
light-dark() でカラーパターンを調整する
Chrome 123 では、light-dark() カラー関数が導入され、ユーザーの好みに合わせてカラーパターンを簡単に調整できるようになりました。次の例では、root で color-scheme が 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 に依存する色をご覧ください。
field-sizing による入力制御の向上
また Chrome 123 では、field-sizing プロパティによりテキスト入力フィールドの自動入力が有効になります。
対応ブラウザ
- 123
- x
- x
- x
text-spacing-trim による CJK 句読点のカーニング
Chrome 123 では、text-spacing-trim プロパティにより中国語、日本語、韓国語（CJK）の句読点文字にカーニングが適用され、過剰なスペースが調整されます。詳しくは、CSS 向けの 4 つの新しい国際化機能のご紹介をご覧ください。
対応ブラウザ
- 123
- x
- x
- x
CSS の @scope ルール
Safari 17.4 には @scope が含まれており、特定の DOM サブツリー内の要素を選択でき、オーバーライドが難しい過度に具体的なセレクタを記述せず、セレクタを DOM 構造に密着させずに要素を正確にターゲティングできます。
詳しくは、CSS の @scope ルールを使用してセレクタのリーチを制限するをご覧ください。
ピクチャー イン ピクチャーの改善
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 Static Routing API を使用して特定のパスで Service Worker をバイパスするをご覧ください。
長いアニメーション フレーム API
Chrome 123 には、Long Animation Frames API も含まれています。これは Long Tasks API の更新で、遅いユーザー インターフェース（UI）の更新に関する理解を深めることができます。これは、応答性を測定する Interaction to Next Paint（INP） Core Web Vitals 指標に影響を与える可能性のある、遅いアニメーション フレームを特定したり、スムーズさに影響を与える他の UI ジャンクを特定したりするのに役立ちます。
対応ブラウザ
- 123
- x
- x
- x
content-visibility プロパティ
Firefox 124 では、CSS の content-visibility プロパティがサポートされています。このプロパティは、要素がコンテンツをレンダリングするかどうかを制御します。ブラウザは、必要になるまでコンテンツのレンダリングを省略できます。
ArrayBuffer と配列のグループ化への追加
Safari 17.4 では、JavaScript に detached プロパティと、ArrayBuffer の transfer() メソッドと transferToFixedLength() メソッドをサポートする新機能が追加されました。
Safari 17.4 には、配列のグループ化メソッド Object.groupBy と Map.groupBy も含まれています。配列のグループ化の詳細については、JavaScript が配列のグループ化メソッドを取得するをご覧ください。
これらの機能は相互運用可能なようになったため、新たに利用可能になったベースラインに結合されます。
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 は、相互運用 2024 の一部です。
Chrome 124 には setHTMLUnsafe メソッドと parseHTMLUnsafe メソッドが含まれており、JavaScript から宣言型 Shadow DOM を使用できるため、これらの機能の相互運用が可能になります。また、WebSocketStream API と writingsuggestions 属性も含まれています。