必知事項は次のとおりです。
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 を動画としてキャプチャし、リモート参加者に送信できます。
<ph type="x-smartling-placeholder">この操作には Region Capture を使用できますが、その場合、プルダウン リストなどのコンテンツが選択されたコンテンツの上に描画されると、そのプルダウンは録画の一部になります。
<ph type="x-smartling-placeholder">Element Capture API を使用すると、共有する要素をターゲットにできるので、この問題を解決できます。
<ph type="x-smartling-placeholder">コードサンプルの任意の要素から動画ストリームをキャプチャするを確認し、ElementCapture オリジン トライアルに登録する
その他
もちろん、他にもたくさんあります。
Document Picture-in-Picture API の一部である
resizeBy()
メソッドとresizeTo()
メソッドで、ユーザー操作が必要になりました。HTMLSelectElement
のshowPicker()
メソッドを使用して、<select>
要素のオプション選択ツールをプログラムで開くことができます。scope_extensions
はオリジン トライアルです。ウェブアプリのプライマリ オリジンと関連するオリジンが一致している場合は、ウェブアプリの動作を他のオリジンを含めるように拡張できます。
関連情報
ここでは、重要なハイライトのみを取り上げます。以下のリンクを確認してください。 追加の変更があります。
- Chrome DevTools の新機能(121)
- Chrome 121 のサポート終了と削除
- ChromeStatus.com の更新内容(Chrome 121)
- Chromium ソース リポジトリの変更リスト
- Chrome リリース カレンダー
登録
最新情報を入手するには、 Chrome Developers YouTube チャンネル 新しい動画が公開されるたびに メールでも通知されます
Adriana Jara と申します。Chrome 122 がリリースされ次第、Chrome の最新情報をお届けします。