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

Chrome 112 の新機能

Adriana Jara

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

CSS でネストルールがサポートされるようになりました。
<dialog> 要素に初期フォーカスを設定するアルゴリズムが更新されました。
今後は、ナビゲーションを高速化するため、Service Worker の no-op 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 コンポーネントがプロジェクトから削除されている場合は、関連するセレクタインスタンスのファイルを検索する代わりに、グループ全体を削除できます。

準備課程は次の場合に役立ちます。

整理。
ファイルサイズを小さくする。
リファクタリング。

CSS のネストを最大限に活用するためのヒントについては、こちらの記事をご覧ください。また、devtools でのネストのサポートについては、こちらをご覧ください。

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

HTML の <dialog> 要素は、ウェブページ内の他のすべてのコンテンツの上に重ねて表示する必要があるダイアログボックスやその他のインタラクティブコンポーネント（閉じ可能なアラートやサブウィンドウなど）を表すための標準化された方法です。

このようなコンテンツの作成には、この HTML 要素を使用することをおすすめします。その機能は、優れたユーザビリティとアクセシビリティを提供するために構築されているためです。

これらの機能の一つは、ダイアログが開かれたときにどの要素がフォーカスされるかの処理です。このバージョンでは、その要素を選択するアルゴリズムが更新されました。

今後:

ダイアログのフォーカス可能な要素では、フォーカス可能な要素ではなく、キーボードのフォーカス可能な要素を参照しますオートフォーカス属性が設定されている場合、<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 である場合、コンソールに警告が表示されます。デベロッパーには、これらのフェッチリスナーを削除することを推奨します。

DevTools での空の Service Worker フェッチハンドラに関する警告

その他

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

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

Chrome 112 の新機能

CSS によるネストのサポート

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

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

その他

関連情報

登録

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

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