このページは 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 マスク（マスク: url(masks.svg#star) など）もサポートされるようになりました。

修正: この記事の以前のバージョンでは、supports() 条件のサポートを @import に追加するという記述がありましたが、そうではありませんでした。この変更は 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 のビデオ会議通話のスクリーンショット。 — エラドさんは、フランソワさんとのビデオ会議でサードパーティ製アプリを使用しています。

[Region Capture] を使用してキャプチャすることもできますが、その場合は、選択したコンテンツの上にプルダウンリストなどのコンテンツが描画されると、そのプルダウンが録画の一部になります。

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

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

プルダウンリストが表示されないターゲット要素のスクリーンショット。 — François には、Elad のプルダウンリストが表示されません。

任意の要素から動画ストリームをキャプチャするを参照してコードサンプルを確認し、ElementCapture オリジントライアルに登録する

など多数

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

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

Chrome 121 の新機能

CSS の更新。

Speculation Rules API の更新

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

など多数

関連情報

登録

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