Chrome 123 ベータ版

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

CSS

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

CSS light-dark() カラー関数

CSS の light-dark() 関数を使用すると、デベロッパーは、ライトモードまたはダークモードのユーザー設定に color-scheme を簡単に適応させることができます。

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 プロパティ

align-content CSS プロパティがブロック コンテナと表セルでサポートされるようになりました。これまで、このプロパティはグリッド項目とフレックス項目でのみサポートされていました。たとえば、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 閉じ括弧には通常、他の表意文字と同じように一定の進み幅を維持するために、グリフ空間の右半分にグリフ内部のスペースがあります。ただし、1 行に表示すると、グリフ内部のスペースが過剰になります。この機能は、このような余分なスペースを調整します。

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

ウェブ API

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

この機能により、ウェブ デベロッパーは、クロスオリジン iframe で WebAuthn 認証情報（パスキーと呼ばれる「publickey」認証情報）を作成できます。この新しい機能には、次の 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 の構文

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

jitterBufferTarget

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

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

Long Animation Frames API は Long Tasks API の拡張機能です。タスクとその後のレンダリング アップデートを測定し、長時間実行スクリプト、レンダリング時間、強制レイアウトとスタイルに費やした時間（レイアウト スラッシング）などの情報を追加します。

デベロッパーは、INP で測定される「遅さ」の診断として、メインスレッドの輻輳の原因を特定できます。この原因が INP の低下を引き起こすことが多いためです。

NavigationActivation インターフェースに navigation.activation が追加されました。現在のドキュメントがアクティブになったときの状態（初期化されたとき、バック/フォワード キャッシュから復元されたときなど）が保存されます。

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

pagereveal イベント

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

ページ作成者は、ページへのアクセス エクスペリエンス（前の状態からのビュー遷移など）を設定するために使用できます。

マルチペン インク描画の PointerEvent.deviceId

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

移動リクエストでのプライベート ネットワーク アクセスのチェック: 警告専用モード

ユーザーのプライベート ネットワークでウェブサイト A からウェブサイト B に移動する前に、この機能により次のことが行われます。

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

サブリソースとワーカー向けの機能はすでにありますが、これは特に移動リクエスト向けとなります。

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

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

このヒントは、ユーザー エージェントまたはデバイスの「フォーム ファクタ」を示します。これにより、サイトはレスポンスを調整できます。

Service Worker 静的ルーティング API

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

共有ストレージの更新

この更新により、iframe を作成せずにクロスオリジン ワークレットを実行できるようになりました。

zstd Content-Encoding

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

Content-Encoding として zstd のサポートを追加すると、ページの読み込みが速くなり、帯域幅の使用量が減り、サーバーで圧縮に費やす時間、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 で始まり、このエイリアスは削除されます。