# CSS
# 新しい CSS カラータイプとカラースペース
CSS カラーレベル 4 に記載されているすべての機能が有効になります。これには、デバイスに依存しない 4 つのカラータイプ（lab、Oklab、lch、Oklch）、color() 関数、グラデーションとアニメーション用のユーザー定義カラースペースが含まれます。
これらの新しいカラータイプやカラースペースの詳細については、高精細度 CSS カラーガイドをご覧ください。
# color-mix() 関数
CSS カラー 5 の便利な color-mix() 関数も導入されます。この関数を使うと、サポートされているあらゆるカラースペースで、ある色と別の色を指定した比率で混ぜ合わせることができます。次の例では、SRGB で 10% の blue を white に混ぜ合わせています。
.item {
background-color: color-mix(in srgb, blue 10%, white);
}
# CSS セレクタ 4 疑似クラス :nth-child(an + b of S)
:nth-child(an + b) と :nth-last-child() を拡張し、セレクタを受け取れるようにします。たとえば、:nth-child(3 of .c) は指定された親の 3 つ目の .c を表します。詳細については、of S 構文による :nth-child() 選択の細かい制御に関するの投稿をご覧ください。
# CSS ルートフォント単位
既存のルートフォント単位 rem に、ルートフォント単位 ex、ch、ic、lh が追加されます。
# CSS 三角関数
CSS の数式に三角関数 sin()、cos()、tan()、asin()、acos()、atan()、atan2() が追加されます。
# CSS カスタム プロパティのスタイル コンテナ クエリ
@container ルールに style() 関数が追加されます。これにより、祖先要素のカスタム プロパティの計算値に基づいてスタイルを適用できるようになります。
# baseline-source プロパティ
baseline-source プロパティを使うと、インラインレベルのボックスのラインボックス内の位置合わせに first と last のどちらのベースラインを使うかを指定できます。
# ウェブ API
# window-management 権限と権限ポリシー文字列
Chrome 111 では、window-placement 権限と権限ポリシー文字列の別名として、window-management が追加されます。これは、将来的に window-placement のサポートを終了して削除することに備えるため、文字列の名前を変更するという大きな作業の一環です。用語の変更により、今後 Window Management API が進化しても、記述子を長期間利用できるようになります。
既存の Media Session API に previousslide と nextslide アクションが追加されます。
# サイズ変更可能な ArrayBuffer と拡張可能な SharedArrayBuffer
ArrayBuffer コンストラクタを拡張し、インプレースでバッファを拡大および縮小できる最大長を受け取れるようにします。同様に、SharedArrayBuffer を拡張し、インプレースで拡大できる最大長を受け取れるようにします。
# 推測ルール : 参照元ポリシーキー
推測ルールの構文を拡張し、推測ルールによってトリガーされる推測リクエストで使う参照元ポリシーを指定できるようにします。また、これによって「十分に厳格な参照元ポリシー」要件が再導入されます。
# ストリーミング宣言型シャドウ DOM
template タグのクローズ時ではなくオープン時にシャドウルートをアタッチすることで、ストリーミングのサポートを追加します。
# View Transitions API
ビューのスナップショットを取得し、状態間で重複することなく DOM を変化できるようにすることにより、シングルページ アプリケーション（SPA）で洗練された画面遷移を実現します。ビュー遷移を使うと、カスタムの遷移を作ったり、デフォルトのシンプルなクロスフェードを使ったりして、ユーザー エクスペリエンスを改善できます。
使ってみたい方は、Chrome デベロッパーの記事の情報やサンプル遷移をご覧ください。
# WebRTC Scalable Video Coding 拡張機能
この拡張機能は、WebRTC の送信動画トラックで利用可能な Scalable Video Coding（SVC）設定を選択する標準手法を定義します。
# WebXR enabledFeatures 属性
XRSessionInit で指定された、この XRSession で有効になっている機能セットと、指定されたモードや機能の仕様で必要となる暗黙機能を返します。付与されたセッションの場合は、すべての requiredFeatures が含まれますが、optionalFeatures のサブセットである場合もあります。ほとんどの機能では、付与されたセッションであるかどうかを別の方法で検出できます。ただし、一部の機能では、ある機能が有効かどうかのシグナルが、今後ずっと利用できないのではなく、今は利用できないだけの機能のデータと密接に結びついている可能性があります。enabledFeatures に問い合わせることで、役立つヒント（たとえば、トラッキングの改善や開始）を表示するべきか、現在のセッションでもう機能がサポートされることはないかを判断できます。
# 進行中のオリジン トライアル
Chrome 111 では、以下の新しいオリジン トライアルにオプトインできます。
# Web Payment API の connect-src CSP バイパスの削除に向けた逆トライアル
Web Payment API がマニフェストをフェッチするときに connect-src CSP ポリシーをバイパスできる機能のサポートを終了します。このサポートが終了した後は、マニフェストをフェッチするためにメソッドからチェーンする他の URL と同じように、PaymentRequest 呼び出しで指定する支払い方法の URL をサイトの connect-src CSP ポリシーで許可する必要があります。
このバイパス機能は Chrome 111 で削除されますが、一時的にバイパスを有効化する必要があるデベロッパーのために、111 から 113 で逆オリジン トライアルが行われます。これにオプトインするには、connect-src CSP バイパスサポート終了の逆トライアルに登録してください。
# ドキュメント ピクチャー イン ピクチャー
ドキュメント ピクチャー イン ピクチャー API は、常に前面に表示されるウィンドウを開く新しい API です。このウィンドウには、任意の HTML コンテンツを設定できます。これは、HTMLVideoElement のみを PiP ウィンドウに設定できる既存のピクチャー イン ピクチャー API の拡張です。ウェブ デベロッパーは、これを使って PiP のユーザー エクスペリエンスを改善できます。
ドキュメント ピクチャー イン ピクチャーのドキュメントをご覧ください。
ドキュメント ピクチャー イン ピクチャーのオリジン トライアルに登録することもできます。
# サポートの終了と機能の削除
このバージョンの Chrome では、以下のサポートの終了と機能の削除が行われます。サポートの終了が予定されている機能、現在はサポートが終了している機能、以前に削除された機能のリストは、ChromeStatus.com をご覧ください。
今回の Chrome のリリースでは、3 つの機能が削除されます。
# PaymentInstruments の削除
PaymentInstruments は、決済アプリの非 JIT インストールを支えるウェブ API です（https://w3c.github.io/payment-handler/ を参照）。これは、ブラウザが実際の決済手段の詳細を保存するという前提で設計されましたが、実際にはそうならず、一部のプライバシーが漏洩します。ほかのブラウザにも導入されていないばかりか、ほかのブラウザ ベンダーもまったく関心を示していません。そのため、この API のサポートを終了し、削除します。
# Web Payment API の connect-src CSP バイパスの削除
Web Payment API がマニフェストをフェッチするときに connect-src CSP ポリシーをバイパスできる機能のサポートを終了します。これが削除された後は、マニフェストをフェッチするためにメソッドからチェーンする他の URL と同じように、PaymentRequest 呼び出しで指定する支払い方法の URL をサイトの connect-src CSP ポリシーで許可する必要があります。
サポート終了のトライアルにオプトインすると、この削除によって必要になる変更を行う時間を延長できます。オプトインの方法については、オリジン トライアルの情報をご覧ください。
# canmakepayment イベントの販売者 ID
canmakepayment Service Worker イベントは、ユーザーがインストールされている決済アプリにカードを保存しているかどうかを販売者に知らせます。また、決済アプリのオリジンの Service Worker に、販売者のオリジンと任意のデータを渡していました。このクロスオリジン通信は、JavaScript で PaymentRequest を作成したときに発生しました。その際にユーザーの操作は必要なく、ユーザー インターフェースは表示されませんでした。このデータ渡しは、canmakepayment イベントと Android の IS_READY_TO_PAY インテントから削除されています。
![Share on Twitter](data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48"><rect fill-opacity="0"/></svg>){kind=small}
![](data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="1228" height="597"><rect fill-opacity="0"/></svg>)
![](data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="192" height="192"><rect fill-opacity="0"/></svg>)
