必知事項は次のとおりです。
- CSS でネストルールがサポートされるようになりました。
<dialog>
要素に初期フォーカスを設定するアルゴリズムが更新されました。- 今後、ナビゲーションを高速化するために、Service Worker の NoOps
fetch()
ハンドラはスキップされます。 - 他にもさまざまな機能があります。
Adriana Jara です。Chrome 112 のデベロッパー向け新機能を詳しく見ていきましょう。
ネストに対する CSS サポート。
CSS プリプロセッサのお気に入りの機能の一つである、スタイルルールのネストが言語に組み込まれました。
ネストする前に、すべてのセレクタを互いに個別に明示的に宣言する必要がありました。その結果、繰り返しが発生し、スタイルシートが大量になり、作成作業にばらつきが生じます。
.nesting { color: hotpink; } .nesting > .is { color: rebeccapurple; } .nesting > .is > .awesome { color: deeppink; }
ネストした後、セレクタの続きと、それに関連するスタイルルールをグループ化できます。
.nesting { color: hotpink; > .is { color: rebeccapurple; > .awesome { color: deeppink; } } }
ネストにより、セレクタを繰り返す必要がなくなり、関連する要素のスタイルルールを同じ場所に配置できるため、デベロッパーは便利です。また、ターゲットとする HTML にスタイルを合わせるのにも役立ちます。
この例の .nesting
コンポーネントがプロジェクトから削除されている場合は、関連するセレクタ インスタンスを検索する代わりに、グループ全体を削除できます。
Nesting は以下の場合に役立ちます。
- 整理。
- ファイルサイズを小さくする。
- リファクタリング。
CSS のネストを最大限に活用するためのヒントについては、こちらの記事をご覧ください。また、DevTools でのネストのサポートについては、こちらをご覧ください。
<dialog>
の初期フォーカスのアルゴリズムを更新しました。
HTML <dialog>
要素は、ウェブページ内の他のすべてのコンテンツの上に表示する必要があるダイアログ ボックスやその他のインタラクティブなコンポーネント(閉じることができるアラートやサブウィンドウなど)を表す標準化された方法です。
この HTML 要素は、そのようなコンテンツの作成におすすめの方法です。この HTML 要素は、優れた一貫性と使いやすさを提供するように作られているためです。
その 1 つに、ダイアログを開いたときにフォーカスされる要素の処理があります。このバージョンでは、その要素を選択するアルゴリズムが更新されました。
今後:
ダイアログのフォーカス ステップは、フォーカス可能な要素ではなく、キーボードのフォーカス可能な要素を参照します。autofocus 属性が設定されている場合、<dialog>
要素自体がフォーカスされます。
<dialog>
要素自体は、フォーカスが <body>
要素に「リセット」されるのではなく、フォールバックとしてフォーカスされます。
<dialog>
要素について詳しくは、こちらのドキュメントをご覧ください。
Service Worker の no-op フェッチ ハンドラをスキップする。
Chrome 112 以降では、Service Worker のすべてのフェッチ リスナーが NoOps であるとユーザー エージェントが識別した場合、Service Worker の起動とナビゲーション クリティカル パスからのリスナーのディスパッチが省略されます。
この機能により、ページ間の移動が速くなります。
取得ハンドラがあることは、ウェブアプリがインストール可能であるための PWA の要件の一つでした。これが、一部のサイトに実質的に空のフェッチ ハンドラーがある原因であると考えられます。ただし、Service Worker を起動して NoOps リスナーを実行するだけではオーバーヘッドが発生するだけで、キャッシュ保存やオフライン機能など、適切な Service Worker で実現できるメリットは得られません。Chrome では操作性向上のために、これらのリンクはスキップされるようになりました。
この変更の一環として、Chrome は、すべての Service Worker の取得リスナーが NoOps である場合にコンソールに警告を表示し、開発者にそれらのフェッチ リスナーを削除するよう促します。
など多数
他にもたくさんあります。
document.domain
のセッターは非推奨になりました。- WebView の
X-Requested-With header
のサポート終了に関するオリジン トライアルがあります - DevTools のレコーダーで、ピアス セレクタを使用して録音できるようになりました。
関連情報
ここでは、重要なハイライトについてのみ説明します。Chrome 112 で追加される変更については、以下のリンクをご覧ください。
- Chrome DevTools の新機能(112)
- Chrome 112 のサポート終了と削除
- ChromeStatus.com の更新(Chrome 112)
- Chromium ソース リポジトリの変更リスト
- Chrome リリース カレンダー
登録
最新情報を入手するには、Chrome Developers YouTube チャンネルに登録してください。新しい動画が公開されるたびに、メール通知が届きます。
Chrome 113 のリリースと同時に Chrome の最新情報をお伝えします