このページは Cloud Translation API によって翻訳されました。

Chrome 121 の新機能

Adriana Jara

必知事項は次のとおりです。

font-palette アニメーションやその他の CSS の更新により、テキストに独自の演出を加えます。
Speculation Rules API が改善されました。
Element Capture API は、オリジントライアルで試すことができます。
他にも多数の機能があります。

Adriana Jara と申します。Chrome 121 のデベロッパー向けの新機能について詳しく見てみましょう。

CSS の更新。

まず、CSS の更新について説明します。

プロパティ scrollbar-color と scrollbar-width が利用できるようになりました。これらのプロパティを使用すると、スクロールバーをカスタマイズし、色と幅を変更できます。

font-palette プロパティを使用すると、特定のパレットを選択してカラーフォントをレンダリングできます。このプロパティがアニメーションをサポートするようになり、パレットの切り替えが、選択した 2 つのパレット間でスムーズに遷移するようになりました。

疑似要素 ::spelling-error と ::grammar-error を使用すると、スペルと文法の誤りの色をカスタマイズしたり、誤字脱字を背景色やその他の装飾でハイライト表示したり、より統合された外観でカスタムスペルチェックを実装したりできます。

SVG の CSS マスクが改善されました。これは、Chrome 120 での CSS マスクのサポートの改善に続くもので、SVG に新しいマスクのサポート（複数のマスク、mask-mode、mask-composite、mask-position、mask-repeat）が追加されました。また、リモート SVG マスク（mask: url(masks.svg#star) など）もサポートされるようになりました。

訂正: この記事の以前のバージョンでは、@import に supports() 条件のサポートが追加されると記載されていましたが、これは誤りでした。この変更は Chrome 122 に含まれています。

Speculation Rules API の更新

サイトは Speculation Rules API を使用して、事前レンダリングするページをプログラムで Chrome に指示し、ページの移動時間を短縮してユーザーエクスペリエンスを向上させることができます。

この API では、ドキュメントルールがサポートされるようになりました。これは、ブラウザがページ内の要素から推測読み込み用の URL のリストを取得できるようにする、推測ルール構文の拡張機能です。ドキュメントルールには、これらのリンクの使用条件を指定できます。これと新しい「eagerness」フィールドを組み合わせることで、ページ上のリンクをホバー時またはマウスダウン時に自動的にプリフェッチまたはプリレンダリングできます。

ドキュメントルールの例を次に示します。

{
  "prerender": [
    {"where": {"and": [
       {"href_matches": "/*"},
       {"not": {"href_matches": "/logout"}},
       {"not": {"selector_matches": ".no-prerender"}}
     ]}}
  ]
}

別の変更により、Speculation-Rules HTTP レスポンスヘッダーを使用して推測ルールを指定できるようになりました。ヘッダーは、インライン <script> 要素を使用する代わりに使用できます。このヘッダーの値は、"application/speculationrules+json" MIME タイプのテキストリソースを指す URL にする必要があります。リソースのルールがドキュメントのルールセットに追加されます。

また、No-Vary-Search ヒントを使用すると、URL クエリパラメータが変更されても、推測プリフェッチが一致するようになります。No-Vary-Search HTTP レスポンスヘッダーは、URL のクエリの一部またはすべてを一致目的で無視できることを宣言します。クエリパラメータキーの順序が一致を妨げないように宣言したり、特定のクエリパラメータが一致を妨げないように宣言したり、特定の既知のクエリパラメータのみが不一致を引き起こすように宣言したりできます。

これらの変更について詳しくは、 Speculation Rules API の改善をご覧ください。

Element Capture API オリジントライアル

Element Capture API はオリジントライアルで利用できます。この API を使用すると、特定の HTML 要素をキャプチャして記録できます。タブ全体のキャプチャを特定の DOM サブツリーのキャプチャに変換し、ターゲット要素の直接の子孫のみをキャプチャします。つまり、遮蔽物と遮蔽されるコンテンツの両方を切り抜いて削除します。

Element Capture API が役立つ例としては、サードパーティのアプリケーションを iframe に埋め込むことができるビデオ会議アプリがあります。このシナリオでは、その iframe を動画としてキャプチャし、リモートの参加者に送信することをおすすめします。

Chrome でのビデオ会議通話のスクリーンショット。 — Elad が François とのビデオ会議でサードパーティ製アプリケーションを使用している。

領域キャプチャを使用しても同じことができますが、その場合、プルダウンリストなどのコンテンツが選択したコンテンツの上に描画されると、そのプルダウンも録画の対象になります。

キャプチャされたプルダウンリストのスクリーンショット。 — Elad のプルダウンリストが、François が受け取ったコンテンツの上に表示されます。

Element Capture API を使用すると、共有する要素をターゲットに設定できるため、この問題を解決できます。

プルダウンリストが表示されていないターゲット要素のスクリーンショット。 — フランソワには、エラドからのプルダウンリストが表示されません。

コードサンプルについては、任意の要素から動画ストリームをキャプチャするをご覧ください。また、ElementCapture オリジントライアルに登録してください。

その他

もちろん、他にもたくさんあります。

Document Picture-in-Picture API の一部である resizeBy() メソッドと resizeTo() メソッドに、ユーザー操作が必要になりました。
HTMLSelectElement の showPicker() メソッドを使用して、<select> 要素のオプション選択ツールをプログラムで開くことができます。
scope_extensions: オリジントライアル中です。ウェブアプリのプライマリオリジンと関連するオリジンの間で合意がある場合、ウェブアプリの動作を他のオリジンに拡張できます。

Chrome 121 の新機能

CSS の更新。

Speculation Rules API の更新

Element Capture API オリジン トライアル

その他

関連情報

登録

Element Capture API オリジントライアル