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 でのビデオ会議通話のスクリーンショット。
エラドさんは、フランソワさんとのビデオ会議通話でサードパーティ製アプリを使用しています。

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

キャプチャされたプルダウン リストのスクリーンショット。
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 の新機能についてお知らせします。