1 月のウェブ プラットフォームの新機能

2024 年 1 月に安定版およびベータ版のウェブブラウザでリリースされた、興味深い機能をいくつかご紹介します。

レイチェル・アンドリュー

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

2024 年 1 月に、Firefox 122、Chrome 121、Safari 17.3 が安定版になりました。この投稿では、ウェブ プラットフォームに追加された新機能を紹介します。

<hr>（<select>）

Firefox 122 では、<select> 要素の許容される子として <hr> 要素が追加されました。これにより、多数のオプションがある選択リストが読みやすくなります。現在、すべてのメインのブラウザ エンジンでこの機能がサポートされています。ただし、現時点では <hr> をユーザー補助ツリーに公開しているブラウザがないことに注意してください。

対応ブラウザ

  • 119
  • 119
  • 122
  • 17

HTMLSelectElement.showPicker

Firefox の <select> 要素には、HTMLSelectElement の showPicker() メソッドもあります。これは、通常、要素が選択されたときに表示される選択ツールと同じですが、ボタンの押下やその他のユーザー操作からトリガーできます。

対応ブラウザ

  • 121
  • 121
  • 122

ソース

Largest Contentful Paint（LCP）API

Firefox 122 は LCP API もサポートしています。このパフォーマンス API は、ユーザーがウェブページを操作する前の最大の画像またはテキストのペイントのタイミング情報を提供します。LCP の詳細については、LCP のドキュメントをご覧ください。

対応ブラウザ

  • 77
  • 79
  • 122
  • x

ソース

CSS スクロールバーのプロパティ

Chrome 121 では、スクロールバーのプロパティ scrollbar-color と scrollbar-width のサポートが追加されています。詳しくは、スクロールバーのスタイル設定をご覧ください。

対応ブラウザ

  • 121
  • 121
  • 64
  • x

ソース

CSS font-palette アニメーション

font-palette プロパティを使用すると、特定のパレットを選択してカラーフォントをレンダリングできます。このプロパティがアニメーションをサポートするようになったため、パレットを切り替えると、選択した 2 つのパレット間がスムーズに遷移します。

ArrayBuffer の transfer() メソッドと transferToFixedLength() メソッド

Firefox には、ArrayBuffer の JavaScript transfer() メソッドと transferToFixedLength() メソッドが含まれています。transfer() メソッドは、現在の ArrayBuffer と同じバイト コンテンツで新しい ArrayBuffer を作成し、元の ArrayBuffer をデタッチします。transferToFixedLength() メソッドも同じように機能しますが、固定サイズの ArrayBuffer を作成します。

対応ブラウザ

  • 114
  • 114
  • 122

ソース

Speculation Rules API の更新

サイトは Speculation Rules API を使用して、事前レンダリングするページを Chrome にプログラムで指示します。これにより、ページ ナビゲーション時間が短縮され、ユーザー エクスペリエンスが向上します。

Chrome 121 では、ドキュメント ルールがサポートされています。このルールは、投機ルール構文の拡張機能であり、ブラウザがページ内の要素から投機的読み込みを行う URL のリストを取得できるようにします。ドキュメントのルールには、これらのリンクを使用できる条件が含まれている場合があります。このフィールドを新しい "eagerness" フィールドと組み合わせることで、カーソルを合わせたりマウスを押したりしたときに、すぐにページ上のリンクを自動的にプリフェッチまたは事前レンダリングできます。

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

ベータ版ブラウザのバージョンでは、ブラウザの次の安定版でリリースされる機能をプレビューできます。この機会に、一般公開に先駆けて、サイトに影響する可能性がある新機能や削除についてテストすることをおすすめします。新しいベータ版は Firefox 123、Chrome 122、Safari 17.4 です。これらのリリースは、プラットフォームに多くの優れた機能をもたらします。詳しくはリリースノートをご覧ください以下に、その一部をご紹介します。

Firefox 123 ベータ版には、宣言型 Shadow DOM が含まれています。

Firefox 123 では、サーバーが完全なレスポンスを準備している間にページが必要とする可能性のあるリソースのプリロードのために、103 Early Hints HTTP 情報レスポンス ステータス コードもサポートしています。

Safari 17.4 ベータ版には便利な機能が満載です。CSS では、ブロック コンテナとテーブルセルの @scope と align-content、さらに ::grammar-error および ::spelling-error 疑似要素などがサポートされています。

フォームでは、フォーム コントロールでの縦書きモード、<input type="date"> の showPicker() メソッド、iOS の <select> 内での <hr> のサポートが追加されました。

JavaScript は、ArrayBuffer の detached()、transfer()、transferToFixedLength() メソッドをサポートするなど、いくつかの新機能を備えています。

Chrome 122 ベータ版では、Async Clipboard API の read() メソッドに unsanitized オプションが追加され、サニタイズされていない HTML 形式を取得できます。JavaScript には、新しいイテレータ ヘルパーと、組み込みの Set クラス用の新しいメソッドが用意されています。

また、Chrome 122 には Storage Buckets API が導入されています。これは、大きなメモリ負荷が発生した場合の永続ストレージ エビクションをより予測しやすくすることを目的としています。