Chrome 116 ベータ版

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

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

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()

いずれかのソースシグナルが中止されたとき、中止されたシグナルを返します。デベロッパーはこれを使用して、独立した中止ソース(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)がユーザー情報を取得できます。これにより、パーソナライズされた [Sign in with IdP] ボタンなどを使用して、リピーターのログイン エクスペリエンスをカスタマイズできます。

RP Context API を使用して、RP は FedCM ダイアログに対してタイトル「Sign in」を置き換えるようリクエストできます。[登録]、[使用する] で「Continue」と言ってから、ユーザーの実際の意図に合わせてください。

未合成のマウスとポインタの開始/離脱イベント

mouseentermouseleavepointerenterpointerleave イベントの event.composed プロパティを "false" にして仕様に準拠させ、相互運用のギャップを修正します。マウスイベントの UI イベントの仕様とポインタ イベントの仕様では、これらのイベントは非合成として定義されています。どちらの仕様も数年前に元の定義から切り替わりました。https://github.com/w3c/uievents/pull/210 https://github.com/w3c/pointerevents/pull/461

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

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

Critical-CH が報告されると NavigationTiming で再起動する

ウェブサイトは、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 制限付きプロパティ オリジン トライアルに登録します。

FedCM Sign-in Status API

Federated Credential Management API(FedCM)の IdP Sign-in Status API を使用すると、ID プロバイダ(IdP)はユーザーのログイン/ログアウト時にブラウザにシグナルを送信できるため、FedCM の UX を最適化してプライバシー プロパティを向上させることができます。

FedCM ログイン ステータスのオリジン トライアルに登録する

EditContext API

EditContext API を使用すると、VK の図形入力、手書きパネル、音声認識、IME コンポジションなどの高度なテキスト入力方式をウェブアプリと統合するプロセスが簡単になります。この API によりアクセシビリティとパフォーマンスが向上し、ウェブベースのエディタの新機能を利用できるようになります。

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

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

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

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

Long Animation Frame Timing オリジン トライアルに登録する