Chrome 122 の新機能

Adriana Jara

必知事項は次のとおりです。

Adriana Jara と申します。Chrome 122 のデベロッパー向け新機能を見てみましょう。

Storage Buckets API。

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

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

Storage Buckets API の中心的な考え方は、サイトに複数のストレージ バケットを作成する機能を提供することです。これにより、ブラウザは各バケットを他のバケットとは独立して削除できます。そのため、強制排除の優先順位を指定して、最も価値の高いデータが削除されないようにすることができます。各ストレージ バケットには、IndexedDB や CacheStorage などの確立されたストレージ API に関連付けられたデータを含めることができます。

詳細と、ストレージ バケットを使い始めるためのコードサンプルについては、ストレージの価値は一様ではありません。ストレージ バケットのご紹介をご覧ください。

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

Chrome 122 の DevTools では、パフォーマンス ペインで次の改善が行われています。

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

また、[メイン] トラックにイベント開始元が追加されました。[パフォーマンス] > [メイン] トラックには、デフォルトで、開始イベントと、そのイベントによって引き起こされた後続のイベントを結ぶ矢印が表示されます。

  • スタイルまたはレイアウトの無効化 -> [スタイルを再計算] または [レイアウト]
  • アニメーション フレームのリクエスト -> アニメーション フレームの呼び出し
  • アイドル状態のコールバックをリクエストする -> アイドル状態のコールバックを実行する
  • タイマーのインストール -> タイマーの呼び出し
  • 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 の新機能についてお知らせします。