このページは 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> 要素自体がフォーカスされます。

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

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

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

Chrome 112 以降では、Service Worker のすべてのフェッチリスナーが NoOps であるとユーザーエージェントが識別した場合、Service Worker が起動し、ナビゲーションクリティカルパスからのリスナーディスパッチが省略されます。

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

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

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

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

その他

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

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

Chrome 112 の新機能

ネストの CSS サポート。

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

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

その他

関連情報

登録

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

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