2024 年 2 月に安定版およびベータ版のウェブブラウザでリリースされた、興味深い機能をいくつかご紹介します。
安定版ブラウザのリリース
2024 年 2 月に、Firefox 123 と Chrome 122 が安定版になりました。この投稿では、ウェブ プラットフォームに追加された新機能を紹介します。
宣言型 Shadow DOM
Firefox 123 は <template> 要素の shadowrootmode 属性をサポートしているため、宣言型 Shadow DOM をサポートしています。この機能は、すべての主要なブラウザで相互運用可能であるため、新たに利用可能になったベースラインに組み込まれました。
対応ブラウザ
- 111
- 111
- 123
- 16.4
103 初期のヒント: プリロード
Firefox 123 には、リソースをプリロードするための 103 Early Hints ステータス コードが含まれています。
対応ブラウザ
- 103
- 103
- 123
- x
CSS ::backdrop の継承に関する変更
::backdrop CSS 疑似要素はビューポートのサイズのボックスで、最上位レイヤに表示されるすべての要素の直下にレンダリングされます。::backdrop の元の仕様では、どの要素からも継承されず、継承もされません。つまり、::backdrop は :root で宣言されたカスタム プロパティにアクセスできません。
仕様が変更され、::backdrop が元の要素からプロパティを継承できるようになりました。この変更は Chrome 122 で実装されます。
詳細については、::backdrop の変更をご覧ください。
Storage Buckets API
Chrome 122 には Storage Buckets API が含まれています。この API を使用すると、サイトはデバイス上のデータをバケットに整理できます。グループデータは、他のバケットに格納されているデータとは別に強制排除できます。
詳しくは、Storage Buckets API のドキュメントをご覧ください。
対応ブラウザ
- 122
- 122
- x
- x
Async Clipboard API: サニタイズされていない HTML の読み取り
Chrome 122 ベータ版では、Async Clipboard API の read() メソッドに unsanitized オプションが追加され、サニタイズされていない HTML 形式を取得できます。
JavaScript Set メソッド
Chrome 122 では、Set の次のメソッドが実装されています。
これらのメソッドは Safari のバージョン 17 からすでに実装されており、Firefox Nightly に組み込まれています。
ベータ版ブラウザのリリース
ベータ版ブラウザのバージョンでは、ブラウザの次の安定版でリリースされる機能をプレビューできます。この機会に、一般公開に先駆けて、サイトに影響する可能性がある新機能や削除についてテストすることをおすすめします。新しいベータ版は Firefox 124、今月リリースされた Chrome 123、Safari 17.4 は継続中です。これらのリリースは、プラットフォームに多くの優れた機能をもたらします。詳しくはリリースノートをご覧ください以下に、その一部をご紹介します。
Chrome 123 では、CSS の新機能がいくつか追加されています。light-dark() カラー関数を使用すると、ユーザーの好みに合わせてカラーパターンを簡単に調整できます。field-sizing プロパティを使用すると、テキスト入力フィールドが自動的に拡張されます。ピクチャー イン ピクチャー モードで表示されているアプリをテストできる新しいメディア機能があります。
text-spacing-trim プロパティは、中国語、日本語、韓国語（CJK）の句読点文字にカーニングを適用して、過剰なスペースを調整します。詳しくは、CSS 向けの 4 つの新しい国際化機能のご紹介をご覧ください。
Chrome 123 と Safari 17.4 では、ブロック レイアウトとテーブル レイアウトで align-content がベータ版としてサポートされています。詳しくは、align-content サポートの変更をご覧ください。グリッド レイアウトまたはフレキシブル レイアウト以外でプロパティを使用している可能性がある場合は、サイトをテストします。ブロック レイアウトでは、以前は機能しなかった場所でプロパティが配置され始めます。
Firefox 124 では、CSS の content-visibility プロパティがサポートされています。このプロパティは、要素がコンテンツをレンダリングするかどうかを制御します。ブラウザは、必要になるまでコンテンツのレンダリングを省略できます。