Chrome 116 ベータ版

CSS モーションパス、バックフォワード キャッシュ NotRestoredReason API、ドキュメントのピクチャー イン ピクチャーなど。

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

CSS

このリリースでは、2 つの新しい CSS 機能が追加されました。

CSS モーションパス

モーションパスを使用すると、グラフィカル オブジェクトを配置して、デベロッパーが指定したパスに沿ってアニメーション化できます。これにより、translate() 関数で使用される標準の直交座標ではなく、(ray() 関数で)極座標を使用して配置したり、定義されたパスに沿って要素をアニメーション化したりするなど、新しい変換の可能性が広がります。これにより、複雑で美しい 2D 空間遷移を簡単に定義できます。パスは circle()ellipse()rect()inset()xywh()polygon()ray()url() として指定できます。

ディスプレイとコンテンツの可視性のアニメーション

Chrome 116 では、キーフレーム アニメーションで display プロパティと content-visibility プロパティがサポートされています。このサポートにより、デベロッパーは、要素が自動的に display: none または content-visibility: hidden になる終了アニメーションを作成できます。アニメーションの終了後にその切り替えを処理する JavaScript を記述する必要はありません。これにより、CSS のみで要素の終了アニメーションを追加できます。

ウェブ API

AbortSignal.any()

ソースシグナルのいずれかが中断されたときに、中止されたシグナルを返します。デベロッパーはこれを使用して、独立した abort ソース(AbortSignal.timeout() で指定されたタイムアウトや AbortController に関連付けられたシグナルなど)を組み合わせて、fetch() などの非同期 API に渡すことができます。

Fetch の BYOB サポート

Chrome の ReadableStream の実装では、読み取り可能なバイト ストリームの Bring-Your-Own-Buffer(BYOB)リーダーがサポートされています。今回、Response.body も「デフォルト」の読み取り可能なストリームではなく、読み取り可能なバイト ストリームになりました。これにより、Fetch API を BYOB リーダーで使用できるようになり、ガベージ コレクションのオーバーヘッドとコピーを削減し、ユーザーの応答性を向上させることができます。Blob.stream() でも、この最適化によるメリットが得られるようになりました。

バックフォワード キャッシュの NotRestoredReason API

NotRestoredReason API は PerformanceNavigationTiming API を介して、ページが BFcache からフレームツリー構造で配信されていない理由のリストを報告します。

ドキュメントのピクチャー イン ピクチャー

ドキュメント ピクチャー イン ピクチャー: 任意の HTMLElements を入力できる常時表示ウィンドウを開く新しい API が追加されています。これは、HTMLVideoElement をピクチャー イン ピクチャー(PIP)ウィンドウに配置することのみを可能にする既存の HTMLVideoElement API を拡張したものです。これにより、ウェブ デベロッパーはユーザーに優れた PIP エクスペリエンスを提供できます。

権限ポリシーのオリジンでのワイルドカードの拡張

許可リストのサブドメインのワイルドカードはある程度の柔軟性をもたらしましたが、既存のワイルドカード パーサーとは異なり、新たなコードと仕様の作業が必要でした。このインテントは、既存のコンテンツ セキュリティ ポリシー仕様の一部を再利用し、許可リストで scheme + wildcard domainwildcard port を許可することで、このオーバーヘッドを削減します。具体的には、このインテントでは、許可リストの定義のオリジンではなく host-source と scheme-source の定義を採用しますが、(一致するオリジンには権限ポリシーが適用されるため)パス部分が空になっている必要があります。

FedCM バンドル: Login Hint API、User Info API、RP Context API

このバンドル アップデートにより、Federated Credential Management API(FedCM)を使用するフェデレーション ログインフローのカスタマイズが可能になります。

Login Hint API を使用すると、証明書利用者(RP)は FedCM UI に表示するユーザー アカウントに関するヒントを指定できます。これは主に、リピーターの UX を改善するために使用されます。

User Info API を使用すると、ID プロバイダ(IdP)はユーザー情報を取得できるようになります。たとえば、カスタマイズした [IdP でログイン] ボタンなどを使用して、リピーターのログイン エクスペリエンスをパーソナライズできます。

RP Context API を使用すると、RP は FedCM ダイアログでタイトル「Sign in」を「Sign up」、「Use」、「Continue」に置き換えて、ユーザーの実際のインテントに合わせるようリクエストできます。

コンポーズされていないマウスとポインタの入力/退出イベント

mouseentermouseleavepointerenterpointerleave イベントの "false"event.composed プロパティを仕様に準拠させ、相互運用性のギャップを修正します。マウスイベント用の UI イベント仕様とポインタ イベント仕様の両方で、これらのイベントはコンポーズされていないものとして定義されています。2 つの仕様は数年前に元の定義から切り替わりました(https://github.com/w3c/uievents/pull/210 https://github.com/w3c/pointerevents/pull/461)。この変更により、相互運用性のギャップに対処することに加え、この変更により、DOM で Shadow DOM ホストが Shadow でリッスンしているとき Shadow DOM ホストに対するこれらのイベントの誤った二重または三重のディスパッチも修正されます。

document.open サンドボックスの継承を削除する

現在、document.open が別のウィンドウをターゲットにしている場合、呼び出し元のサンドボックス フラグが呼び出し先に適用されます。今回の変更により、

NavigationTiming で Critical-CH が原因で再起動が発生したことを報告

ウェブサイトは、Critical-CH HTTP レスポンス ヘッダーに含めることで、特定の Client Hints がページにとって不可欠であることを示すことができます。これにより、Critical-CH HTTP レスポンス ヘッダーにリストされているヒントが、最初に送信された HTTP リクエストに含まれている可能性がある(ただし含まれていない)場合に、接続の再起動がトリガーされます。このインテントでは、readonly attribute DOMHighResTimeStamp criticalCHRestart;PerformanceNavigationTiming インターフェースに追加することを提案しています。

オリジン トライアルが進行中

Chrome 116 では、次の新しいオリジン トライアルを有効にできます。

COOP: restricted-properties

Cross-Origin-Opener-Policy は、ポップアップとオープナーの関係を切断し、セキュリティを強化するために使用されます。「restrict-properties」は、関係を完全に切断するのではなく制限する推奨値です。COEP と併用すると、crossOriginIsolated が有効になります。

COOP restricted-properties Origins のトライアルに登録します。

FedCM Sign-in Status API

Federated Credential Management API(FedCM)の IdP Sign-in Status API を使用すると、ユーザーのログイン/ログアウト時に ID プロバイダ(IdP)がブラウザにシグナルを送信できるようになり、FedCM は UX を最適化してプライバシー特性を高めることができます。

FedCM Sign-in Status オリジン トライアルに登録する

EditContext API

EditContext API は、VK 図形作成、手書きパネル、音声認識、IME Composition などの高度なテキスト入力方法をウェブアプリに統合するプロセスを簡素化します。この API は、ユーザー補助機能とパフォーマンスを改善し、ウェブベースのエディタの新機能を提供します。

EditContext API オリジン トライアルに登録する

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

これは長いタスクの延長です。タスクは、その後のレンダリングの更新とともに測定され、長時間実行スクリプト、レンダリング時間、強制レイアウトとスタイル(レイアウト スラッシング)に費やされた時間などの情報が追加されます。

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

長いアニメーション フレームのタイミングのオリジン トライアルに登録する