このページは Cloud Translation API によって翻訳されました。

Chrome 112 の新機能

Adriana Jara

必知事項は次のとおりです。

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 である場合にコンソールに警告を表示し、開発者にそれらのフェッチリスナーを削除するよう促します。

空の Service Worker 取得ハンドラに関する DevTools での警告。

など多数

他にもたくさんあります。

document.domain のセッターは非推奨になりました。
WebView の X-Requested-With header のサポート終了に関するオリジントライアルがあります
DevTools のレコーダーで、ピアスセレクタを使用して録音できるようになりました。

Chrome 112 の新機能

ネストに対する CSS サポート。

<dialog> の初期フォーカスのアルゴリズムを更新しました。

Service Worker の no-op フェッチ ハンドラをスキップする。

など多数

関連情報

登録

`<dialog>` の初期フォーカスのアルゴリズムを更新しました。

Service Worker の no-op フェッチハンドラをスキップする。