必知事項は次のとおりです。
- 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 である場合、コンソールに警告が表示されます。デベロッパーには、これらのフェッチ リスナーを削除することを推奨します。
その他
もちろん、他にもたくさんあります。
document.domain
のセッターは非推奨になりました。- WebView の
X-Requested-With header
のサポート終了について、オリジン トライアルがあります。 - devtools のレコーダーで、ピアス セレクタを使用して記録できるようになりました。
関連情報
ここでは、重要なハイライトのみを取り上げます。以下のリンクを確認してください。 その他の変更が行われます。
- Chrome DevTools の新機能(112)
- Chrome 112 のサポート終了と削除
- ChromeStatus.com の更新内容(Chrome 112)
- Chromium ソース リポジトリの変更リスト
- Chrome リリース カレンダー
登録
最新情報を入手するには、 Chrome Developers YouTube チャンネル 新しい動画が公開されるたびに メールでも通知されます
Chrome 113 がリリースされたらすぐに、Adriana Jara です。 Chrome の新機能を紹介します