2024年1月のWebプラットフォームの新機能

このページの一部は、Google が作成し、クリエイティブ・コモンズ 4.0 著作権表示情報に記載されている用語に従って使用されている、著作物を複製したものです。

以下の内容は、2024年1月30日に公開された記事「New to the web platform in January」の日本語訳です。翻訳の正確性は保証いたしかねますので、必要に応じ原文を参照ください。また、ブラウザサポートについては原文公開時点のbrowser-compat-dataに基づいており、必ずしも最新の状況を反映しているとは限りませんので、ご注意ください。

2024年1月に安定版およびベータ版のWebブラウザに搭載された興味深い機能を複数ご紹介します。

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

2024年1月にはFirefox 122、Chrome 121とSafari 17.3が安定版となりました。本記事では、Webプラットフォームに追加された新機能をご紹介します。

<select>要素の中の<hr>

Firefox 122では、<select>要素の子要素として<hr>要素を使用できるようになりました。これは、選択肢の多いセレクトボックスの可読性を高めるのに役立ちます。現在、すべての主要なブラウザエンジンが、この機能をサポートしています。しかし、現時点ではどのブラウザも<hr>要素をアクセシビリティツリーに含めていないことには注意が必要です。

HTMLSelectElement.showPicker

また、Firefoxにおいて<select>要素にHTMLSelectElementのshowPicker()メソッドがサポートされています。これは、要素が選択されたときに表示されるのと同じピッカーですが、ボタンが押されたときや他のユーザー操作をトリガーにできます。

Largest Contentful Paint（LCP）API

Firefox 122はLCP APIもサポートしました。このパフォーマンスに関するAPIは、ユーザーがWebページを操作するより前の、最も面積の大きな画像やテキストの描画に関するタイミングを情報提供します。LCP についての詳細はLargest Contentful Paint (LCP)をご覧ください。

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

Chrome 121ではスクロールバー関連のCSSプロパティ、scrollbar-colorとscrollbar-widthがサポートされました。これについては、Scrollbar stylingで詳しく説明しています。

font-paletteプロパティを用いたアニメーション

font-paletteプロパティを使うと、カラーフォントをレンダリングする際のパレットを指定できます。このプロパティがアニメーションに対応したため、パレット間の切り替えが、指定した2つのパレット間のスムースなアニメーションとなります。

ArrayBufferのtransfer()およびtransferToFixedLength()メソッド

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

Speculation Rules APIの更新

Speculation Rules APIを使用すると、どのページを先読みするかをChromeに指示し、ページ遷移に要する時間を短縮することで、ユーザーエクスペリエンスをより優れたものにすることができます。

Chrome 121は、document ruleがサポートされています。document ruleは、推測ルール構文の拡張であり、投機的に読み込みを行うURLのリストをページ内にある要素からブラウザが取得するためのものです。document ruleには、どのリンクを使用するかの基準を含めることができます。これにより、新しい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が追加され、メモリ負荷が高い状況下で永続ストレージの退避が予測しやすくなります。