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 のその他の変更については、次のリンクをご覧ください。

登録

最新情報を入手するには、Chrome Developers の YouTube チャンネルにチャンネル登録してください。新しい動画が公開されると、メール通知が届きます。

Adriana Jara と申します。Chrome 122 がリリースされ次第、Chrome の新機能についてお知らせします。