Chrome 112 の新機能

次の説明をお読みください。

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

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

今後は、

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

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

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

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

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

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

ウェブアプリをインストール可能にするには、フェッチ ハンドラが PWA の要件の一つでした。一部のサイトのフェッチ ハンドラが空であるのは、このことが原因である可能性があります。ただし、サービス ワーカーを開始して無効なリスナーを実行しても、オーバーヘッドが増えるだけで、キャッシュやオフライン機能など、適切なサービス ワーカーで実装できるメリットは得られません。そのため、Chrome ではナビゲーションを改善するために、これらのページをスキップするようになりました。

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

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

その他

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

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

関連情報

主なハイライトのみを記載しています。Chrome 112 のその他の変更については、以下のリンクをご覧ください。

登録

最新情報を入手するには、Chrome Developers の YouTube チャンネルチャンネル登録してください。新しい動画が公開されるとメール通知が届きます。

Adriana Jara と申します。Chrome 113 がリリースされ次第、Chrome の新機能についてお知らせします。