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

Chrome 121 の新機能

Adriana Jara

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

font-palette アニメーションやその他の CSS アップデートでテキストに独特なタッチを加えます。
Speculation Rules API が改善されました。
Element Capture API はオリジントライアルでお試しいただけます。
他にも多くの機能を利用できます。

アドリアナ・ジャラです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)）もサポートされるようになりました。

修正: この記事の以前のバージョンでは、@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 でのビデオ会議通話のスクリーンショット。 — エラドさんは、フランソワさんとのビデオ会議通話でサードパーティアプリケーションを使用します。

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

プルダウンリストのスクリーンショット。 — Elad のプルダウンリストは、François が受信したコンテンツの上に表示されます。

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

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

コードサンプルの任意の要素から動画ストリームをキャプチャするを確認し、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 のオリジントライアル