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

Chrome 112 の新機能

Adriana Jara

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

CSS でルールのネストがサポートされるようになりました。
<dialog> 要素に初期フォーカスを設定するアルゴリズムが更新されました。
ナビゲーションを高速化するため、サービスワーカーの No-op fetch() ハンドラがスキップされるようになりました。
他にもさまざまな機能があります。

Adriana Jara と申します。Chrome 112 でデベロッパー向けに追加された新機能について詳しく見ていきましょう。

ネストの CSS サポート。

CSS プリプロセッサの人気機能の 1 つであるスタイルルールのネスト機能が、この言語に組み込まれました。

ネストする前は、すべてのセレクタを個別に明示的に宣言する必要がありました。これにより、重複、スタイルシートの膨大化、分散したオーサリングエクスペリエンスが発生します。

前

.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 要素は、一貫した優れたユーザビリティとユーザー補助機能を提供するように構築されているため、このようなコンテンツを作成する際に推奨されます。

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

今後は、

ダイアログのフォーカス設定手順では、フォーカス可能な要素ではなく、キーボードでフォーカス可能な要素が対象になります。<dialog> 要素に autofocus 属性が設定されている場合、<dialog> 要素自体がフォーカスされます。

フォーカスが <body> 要素に「リセット」されるのではなく、<dialog> 要素自体がフォーカスを取得します。

<dialog> 要素の詳細については、ドキュメントをご覧ください。

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

Chrome 112 以降、ユーザーエージェントがサービスワーカーのすべての取得リスナーが no-op であると識別した場合、サービスワーカーの開始とナビゲーションのクリティカルパスからのリスナーのディスパッチが省略されます。

この機能により、これらのページのナビゲーションが高速化されます。

ウェブアプリをインストール可能にするには、フェッチハンドラが PWA の要件の一つでした。一部のサイトでフェッチハンドラが空になっているのは、このことが原因である可能性があります。ただし、Service Worker を起動して no-op リスナーを実行すると、オーバーヘッドのみが発生し、キャッシュやオフライン機能など、適切な Service Worker で実装できるメリットはまったく得られないことになります。そのため、Chrome ではナビゲーションを改善するために、これらのページをスキップするようになりました。

この変更の一環として、Service Worker のすべての取得リスナーが no-op である場合、Chrome はコンソールに警告を表示し、デベロッパーにそれらの取得リスナーを削除するよう促します。

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

その他

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

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

Chrome 112 の新機能

ネストの CSS サポート。

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

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

その他

関連情報

登録

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

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