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