Chrome 123 ベータ版

特に記載のない限り、Android、ChromeOS、Linux、macOS、Windows 向けの最新の Chrome Beta チャンネル リリースに次の変更が適用されます。ここに記載されている機能について詳しくは、リンク先または ChromeStatus.com のリストをご覧ください。Chrome 123 は 2024 年 2 月 21 日現在、ベータ版です。最新版はパソコンの Google.com または Android の Google Play ストアでダウンロードできます。

CSS

今回のリリースでは 5 つの新しい CSS 機能を追加しました。

CSS light-dark() 色関数

CSS の light-dark() 関数を使用すると、ライトモードまたはダークモードのユーザー設定に合わせてカラーパターンを簡単に調整できます。

light-dark() を使用して、1 つの CSS プロパティ内に 2 つの異なる色の値を指定します。ブラウザ（またはデバイス）は、要素で計算された color-scheme 値に基づいて適切な色を自動的に選択します。たとえば、次の CSS があるとします。

  • ユーザーがライトモードを選択した場合、.target 要素の背景はライム色になります。
  • ユーザーがダークモードを選択した場合、.target 要素の背景は緑色になります。
html {
  color-scheme: light dark;
}
.target {
    background-color: light-dark(lime, green);
}

CSS ピクチャー イン ピクチャーの表示モード

picture-in-picture 値に対する CSS display-mode メディア機能のサポートが追加されました。これにより、ウェブ デベロッパーは、ウェブアプリ（の一部）がピクチャー イン ピクチャー モードで表示される場合にのみ適用される特定の CSS ルールを作成できます。

このメディア機能の詳細については、ピクチャー イン ピクチャーのドキュメントをご覧ください。

ブロックの align-content CSS プロパティ

CSS プロパティ align-content がブロック コンテナとテーブルセルでサポートされるようになりました。これまで、このプロパティはグリッドとフレキシブル アイテムでのみサポートされていました。たとえば、display: block、display: list-item、display: table-cell は、align-content を使用して配置できるようになりました。

詳しくは、ブロック レイアウトとテーブル レイアウトでの align-content のサポートをご覧ください。

field-sizing CSS プロパティ

field-sizing プロパティを使用すると、フォーム コントロールの固定のデフォルト サイズを無効にして、コンテンツに応じたサイズにできます。これにより、自動的に増加するテキスト フィールドを作成できます。

CSS の text-spacing-trim プロパティ

このプロパティは、中国語、日本語、韓国語（CJK）の句読点文字にカーニングを適用して、JLREQ（日本語のテキスト レイアウトの要件）と CLREQ（中国語のテキスト レイアウトの要件）で定義されている視覚に訴えるタイポグラフィを作成します。

多くの CJK 句読点文字には、グリフ内部のスペースが含まれています。たとえば、CJK の終点と CJK の閉じかっこは通常、そのグリフスペースの右半分にグリフ内部のスペースを入れて、他の表意文字と同じように前進させます。ただし、連続して表示されると、グリフの内部スペースが過剰になります。この機能は、そのような過剰なスペースを調整します。

text-spacing-trim プロパティは、normal、trim-start、space-all、space-first の 4 つの値のいずれかを受け入れます。詳しくは、CSS に国際化した 4 つの新機能を導入するをご覧ください。

ウェブ API

クロスオリジンの iframe で WebAuthn 認証情報の作成を許可する

この機能により、ウェブ デベロッパーはクロスオリジンの iframe で WebAuthn 認証情報（パスキーと呼ばれる「公開鍵」認証情報）を作成できます。この新しいアビリティを使用するには、次の 2 つの条件が必要です。

  • iframe には publickey-credentials-create-feature 権限ポリシーがあります。
  • iframe で一時的なユーザー アクティベーションが行われる。

これにより、デベロッパーは、ID ステップアップ フローの後など、証明書利用者がフェデレーション ID エクスペリエンスを提供する後など、埋め込みシナリオでパスキーを作成できるようになります。

アトリビューション レポートの機能バンドル

Chrome 123 では、以下の点に重点を置いた Attribution Reporting API にトリガーデータのカスタマイズと集計可能値のフィルタが追加されました。

  • トリガーデータのカーディナリティと値のカスタマイズをサポートすることで、イベントレベル レポートの API 構成の柔軟性を高めます。
  • 集計可能な値のフィルタをサポートすることで、概要レポートの API 構成の柔軟性を高めます。

アプリとウェブにわたるアトリビューション測定

Attribution Reporting API を拡張して、ウェブで発生したコンバージョンを、ブラウザ外や他のアプリ内で発生したイベントに結び付けられるようにします。

この提案では、アトリビューションの OS レベルのサポートを利用しています。具体的には、モバイルウェブ上のイベントを Android のプライバシー サンドボックス内のイベントと結合できるようにするオプションがデベロッパーに提供されますが、他のプラットフォームのサポートも実装できます。

インライン モジュール スクリプトに対する blocking=render

これは小さな変更であり、<script blocking="render"> の人為的な制限が取り除かれています。この変更以前は、src がデータ URI であっても、<script blocking="render"type="module"> には src 属性が必要でした。他のスクリプトをインポートするインライン モジュール スクリプトはレンダリング ブロックが可能なため、これは不要な制約です。

これは、ドキュメント間のビュー遷移がカスタマイズにレンダリング ブロック スクリプトに依存することが多いため、レンダリング ブロック スクリプトの作成が容易になるようにすることで、この機能をサポートするためです。

ドキュメントのピクチャー イン ピクチャー: focus() API がオープナーをフォーカスできるようにする

ドキュメントのピクチャー イン ピクチャー ウィンドウから opener.focus() を使用して、ドキュメントのピクチャー イン ピクチャー ウィンドウを所有するタブにシステムレベルのフォーカスを設定できるようになりました。

これにより、デベロッパーは必要に応じて元のタブをフォアグラウンドに戻すことができます。たとえば、小さいピクチャー イン ピクチャー ウィンドウに収まらない UI エクスペリエンスにユーザーがアクセスする必要がある場合などです。

属性の with 構文をインポートする

インポート属性は、インポート宣言にアノテーションを付けられる JavaScript 機能です（例: import xxx from "mod" with { type: "json" }）。Chrome では、当初、assert をキーワードとして使用して、以前のバージョンの提案の以前のバージョン（Chrome 91）がリリースされていました。このバージョンはその後、with を使用するように更新されました。これは、JSON モジュールと CSS モジュールの HTML と統合する際にいくつかの変更が必要となったためです。

jitterBufferTarget

jitterBufferTarget 属性を使用すると、アプリで RTCRtpReceiver ジッター バッファが保持するメディアの目標時間をミリ秒単位で指定できます。これはユーザー エージェントによって行われるバッファリングの量に影響し、さらには再送信とパケットロスの回復に影響します。ターゲット値を変更することで、アプリは、プレイアウト遅延と、ネットワーク ジッターによって音声または動画のフレームが不足するリスクとのトレードオフを制御できます。

長いアニメーションのフレーム タイミング

Long Animation Frames API は、Long Tasks API の拡張機能です。タスクは後続のレンダリング更新とともに測定され、長時間実行スクリプト、レンダリング時間、強制レイアウトとスタイル（レイアウト スラッシング）にかかった時間などの情報が追加されます。

デベロッパーは、不良 INP の原因となることが多いメインスレッドの輻輳の原因を特定することで、INP によって測定される「遅延」の診断として使用できます。

NavigationActivation インターフェースは navigation.activation を追加します。これには、現在のドキュメントが有効になった時点（初期化された時点、バックフォワード キャッシュから復元された時点など）に関する状態が保存されます。

つまり、デベロッパーはユーザーの移動元に基づいてカスタマイズされたページを提供できます。たとえば、ホームページからアクセスしてきた場合は、別のアニメーションを実行します。

Pagereveal イベント

pagereveal イベントは、ドキュメントが最初に読み込まれた後、バックフォワード キャッシュからの復元が行われた後、または事前レンダリングから有効化された後の最初のレンダリングの機会に、ドキュメントのウィンドウ オブジェクトで発生します。

ページ作成者は、これを使用してページエントリ エクスペリエンス（以前の状態からのビュー遷移など）を設定できます。

マルチペン筆記用 PointerEvent.deviceId

高度なペン入力機能を備えたデバイスが普及するにつれ、エンドユーザーとデベロッパーの双方に豊かなエクスペリエンスを提供するために、ウェブ プラットフォームは進化を続け、これらの高度な機能を完全にサポートすることが重要です。このような進歩の 1 つに、デバイスのデジタイザーが、同時に操作する複数のペンデバイスを認識する機能があります。この機能は PointerEvent インターフェースを拡張したものです。新しい属性 deviceId は、デベロッパーがページを操作する個々のペンを識別するために確実に使用できる、セッション永続性のあるドキュメント分離された一意の識別子を表します。

ナビゲーション リクエストのプライベート ネットワーク アクセス チェック: 警告専用モード

ウェブサイト A がユーザーのプライベート ネットワーク内の別のサイト B に移動する前に、この機能は次の処理を行います。

  1. リクエストが安全なコンテキストから開始されたかどうかを確認します。
  2. プリフライト リクエストを送信し、B がプライベート ネットワーク アクセスを許可するヘッダーを返すかどうかを確認します。

サブリソースとワーカーの機能はすでに存在しますが、この追加は特にナビゲーション リクエストを対象としています。

これらのチェックは、ユーザーのプライベート ネットワークを保護するために行われます。この機能は「警告のみ」モードであるため、いずれかのチェックが失敗してもリクエストは失敗しません。代わりに DevTools に警告が表示され、デベロッパーは今後の適用に備えることができます。

Sec-CH-UA-Form-Factor クライアントのヒント

このヒントは、サイトがレスポンスをカスタマイズできるように、ユーザー エージェントまたはデバイスの「フォーム ファクタ」を示します。

Service Worker の静的ルーティング API

この API を使用すると、デベロッパーはルーティングを構成し、Service Worker の単純な作業をオフロードできます。条件が一致すれば、Service Worker を起動したり JavaScript を実行したりせずにナビゲーションが行われるため、ウェブページは Service Worker のインターセプトによるパフォーマンスの低下を回避できます。詳しくは、この API に関する以前のブログ投稿をご覧ください。

共有ストレージの更新

このアップデートにより、iframe を作成することなく、クロスオリジン ワークレットを実行できるようになりました。

zstd コンテンツのエンコード

Zstandard（zstd）は、RFC8878 で説明されているデータ圧縮メカニズムです。これは高速な可逆圧縮アルゴリズムであり、zlib レベルでのリアルタイム圧縮シナリオと優れた圧縮率を対象としています。zstd トークンは、IANA 登録済みの Content-Encoding トークンとして追加されています。

zstd のサポートを Content-Encoding として追加すると、ページの読み込みが速くなり、帯域幅の使用量が減少し、サーバーで圧縮に費やされる時間、CPU、消費電力が減少し、サーバー費用を削減できます。

新しいオリジン トライアル

Chrome 123 では、次の新しいオリジン トライアルにオプトインできます。

WebAssembly JavaScript Promise の統合

WebAssembly を使用して記述されたレスポンシブ アプリケーションをサポートするには、WebAssembly プログラムの一時停止と再開を可能にする機能を提供する必要があります。

Promise の統合の最初のユースケースは、ソースが同期 API に依存している WebAssembly プログラムが、ウェブ プラットフォームで一般的になっている非同期 API を使用できるようにすることです。

Promise 統合オリジン トライアルに登録します。

削除

Chrome 123 では次の機能が削除されます。

権限と権限ポリシー window-management の window-placement エイリアス

Chrome 111 では、window-placement 権限と権限ポリシー文字列のエイリアスとして window-management が追加されました。これは、最終的に window-placement を非推奨にし、削除することで文字列の名前を変更する大規模な取り組みの一環です。Window Management API が時間の経過とともに進化するにつれて、用語の変更により記述子の寿命が短縮されます。

window-placement エイリアスのサポート終了に関する警告は Chrome 113 から発生し、現在は削除される予定です。