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 122Chrome 121Safari 17.3が安定版となりました。本記事では、Webプラットフォームに追加された新機能をご紹介します。

<select>要素の中の<hr>

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

ブラウザサポート:
  • Google Chrome119サポート済み
  • Microsoft Edge119サポート済み
  • Mozilla Firefox122サポート済み
  • Safari17サポート済み

HTMLSelectElement.showPicker

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

ブラウザサポート:
  • Google Chrome121サポート済み
  • Microsoft Edge121サポート済み
  • Mozilla Firefox122サポート済み
  • Safari実験的な機能

Largest Contentful Paint(LCP)API

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

ブラウザサポート:
  • Google Chrome77サポート済み
  • Microsoft Edge79サポート済み
  • Mozilla Firefox122サポート済み
  • Safari×未サポート

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

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

ブラウザサポート:
  • Google Chrome121サポート済み
  • Microsoft Edge121サポート済み
  • Mozilla Firefox64サポート済み
  • Safari×未サポート

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

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

ArrayBuffertransfer()およびtransferToFixedLength()メソッド

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

ブラウザサポート:
  • Google Chrome114サポート済み
  • Microsoft Edge114サポート済み
  • Mozilla Firefox122サポート済み
  • Safari👁プレビュー

Speculation Rules APIの更新

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

Chrome 121は、document ruleがサポートされています。document ruleは、推測ルール構文の拡張であり、投機的に読み込みを行うURLのリストをページ内にある要素からブラウザが取得するためのものです。document ruleには、どのリンクを使用するかの基準を含めることができます。これにより、新しいeagernessフィールドと組み合わせて、ページ上のリンクに対しマウスホバーやマウスダウン時に自動的にプリフェッチまたはプリレンダリングさせることができます。

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

ベータ版のブラウザは、次の安定版で実装されるもののプレビューを提供します。新機能や既存機能の削除など、あなたのサイトに影響を与える可能性のあるものを、リリース前にテストする絶好の機会です。新しいベータ版はFirefox 123Chrome 122Safari 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についても、ArrayBufferdetached()transfer()transferToFixedLength()の各メソッドなど、いくつかの新機能がサポートされています。

Chrome 122のベータ版では、Async Clipboard APIread()メソッドでunsanitizedオプションが追加され、非サニタイズHTMLフォーマットを取得できるようになりました。JavaScriptに関して、新しいイテレータヘルパーや、組み込みのSetクラスのための新しいメソッドもサポートされています。

また、Chrome 122にはStorage Buckets APIが追加され、メモリ負荷が高い状況下で永続ストレージの退避が予測しやすくなります。