Chrome 122 の新機能

Adriana Jara

フォーマットの詳細については次をご覧ください。

Adriana Jara です。Chrome 122 のデベロッパー向けの新機能を詳しく見ていきましょう。

Storage Buckets API です。

Storage Buckets API を使用すると、永続ストレージをより細かく管理できるようになります。

これまで、ユーザーがデバイスの保存容量を使い切ると、IndexedDB や localStorage などの API で保存されたデータはユーザーの介入なしに失われます。ストレージを永続化する方法の一つは、StorageManager インターフェースの persist() メソッドを使用することです。ただし、ストレージの永続化をリクエストするこの方法では、

Storage Buckets API の核となる考え方は、複数のストレージ バケットを作成する権限をサイトに付与することです。ブラウザは、各バケットを他のバケットとは無関係に削除することができます。そのため、エビクションの優先順位を指定して、最も価値のあるデータが削除されないようにすることができます。各ストレージ バケットには、IndexedDB や CacheStorage などの確立されたストレージ API に関連付けられたデータを含めることができます。

ストレージ バケットの詳細と使い方については、ストレージ バケットの種類をご覧ください。

パフォーマンス パネルでの DevTools の改善

Chrome 122 の DevTools では、[パフォーマンス] パネルで以下の改善が行われました。

まず、[パフォーマンス] パネルの上部にあるタイムラインで、パンくずリストを設定し、パンくずリスト間を移動できるようになりました。パンくずリストを設定するには、タイムラインで範囲を選択してカーソルを合わせ、対応する [N ms] zoom_in ボタンをクリックします。ネストされた複数のパンくずリストを連続して作成できます。ズームレベル間を移動するには、[タイムライン] の上部にあるチェーンで対応するパンくずをクリックします。パンくずリストの使い方については、次の動画をご覧ください。

また、メイン トラックにイベント イニシエータが追加されました。[パフォーマンス] > [メイン] トラックには、開始元とそれによって発生した次のイベントを接続する矢印がデフォルトで表示されます。

  • スタイルまたはレイアウトの無効化 -> [スタイルを再計算] または [レイアウト]
  • [アニメーション フレームをリクエスト] -> [アニメーション フレームの呼び出し] を選択します。
  • [Request Idle Callback]（アイドル状態のコールバックのリクエスト） -> [Fire Idle Callback]（アイドル状態のコールバックの呼び出し）
  • [タイマーをインストール] -> [タイマーの呼び出し]
  • [WebSocket の作成] -> [送信...] を選択し、[WebSocket handshake の受信] または [WebSocket の破棄] を選択します。

矢印を確認するには、トレース内で該当するイベントを見つけてクリックします。

リクエストの矢印とアイドル状態のコールバックの呼び出し

DevTools のその他の最新情報については、Devtools 122 の新機能をご覧ください。

Async Clipboard API の unsanitized オプション

Async Clipboard API を使用してコピーして貼り付ける際に、read() メソッドの unsanitized オプションを使用すると、アプリとウェブサイトでサニタイズされていない HTML を取得できます。サイトにこのプロパティが含まれていない場合、クリップボードからの HTML の読み取りはサニタイズされます。

デフォルトでは、非同期 API を使用して text/html MIME タイプを読み取ると、セキュリティ上の懸念から HTML マークアップからコンテンツを削除するためにサニタイザーが呼び出され、結果の HTML 内でスタイルがインライン化されます。その結果、ウェブ デベロッパーやモバイルアプリで HTML ペイロードを読み取った際に、HTML コンテンツの忠実度が低下する可能性があります。

次の例では、出力の違いを確認できます。

入力:

<style>p { color: blue; }</style><p>Hello, World!</p>'

サニタイズ済み（デフォルト）:

<p style='color: blue; font-size: medium; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; white-space: normal; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;'>Hello, World!</p>

unsanitized オプションを使用する場合:

<html><head><style>p { color: blue; }</style></head><body><p>Hello, World!</p></body></html>

Clipboard API の基本については、クリップボード アクセスのブロックを解除するをご覧ください。

など多数

他にもたくさんあります。

  • CSS では、サポートされていない機能を含むコンテナクエリは一致しません。たとえば、次のクエリは未知の特徴が原因で一致しません。
@container (width > 0px) or (unknown) {}

  • dataTransfer.clearData() は File オブジェクトには影響しません。テキストタイプのオブジェクトのみを削除します。

  • WebGL の drawingBufferStorage を使用すると、レンダリングをデフォルトの描画バッファ ピクセル形式に変換する際に余分なコピーを避け、8 ビットを超える精度でコンテンツを描画できます。

関連情報

ここでは、重要なハイライトについてのみ説明します。Chrome 122 で追加される変更については、次のリンクをご覧ください。

登録

最新情報を入手するには、Chrome Developers YouTube チャンネルに登録してください。新しい動画が公開されるたびに、メール通知が届きます。

Adriana Jara です。Chrome 123 がリリースされ次第、Chrome の最新情報をお届けします。