CSS グリッドツールを作成した理由
CSS グリッドは、ウェブ デベロッパーが複雑な 2 次元レイアウトを作成し、グリッド内の各子アイテムのサイズ、配置、順序に関するルールを設定できる、非常に強力な CSS レイアウト システムです。CSS Grid は、Flexbox が普及した後に導入されたものです。これらを組み合わせることで、デベロッパーは複雑な配置や JavaScript 支援レイアウトをせずに、優れたレスポンシブ デザインを実現できます。
比較的新しいレイアウト システムである CSS グリッドも、正しく調整することが困難です。その構文は非常に多用的で（グリッド クイック リファレンスを検索するだけ）、同じレイアウトを実現する多くの方法があります。柔軟なサイズ設定と暗黙的なトラックにより、レイアウトが想定どおりに動作する理由または動作していない理由を判断することが難しくなります。そのため、DevTools に専用の CSS グリッドツールを提供することにいたしました。これにより、デベロッパーは CSS コードの動作や適切なレイアウトへの移動方法をより深く理解できるようになります。
ツールの設計
Chrome と Edge の共同の取り組み
CSS グリッドツールは、Chrome DevTools と Edge DevTools の両方で注目を浴びました。最初から協力することにしました。両チームがプロダクト、エンジニアリング、設計のリソースを共有し、それを実現するために毎週調整を図っています。
機能の概要
CSS グリッドツールには、主に次の 3 つの機能があります。
- グリッド固有の永続的なオーバーレイで、次元と順序の情報を提供します
- CSS グリッド コンテナをハイライト表示し、グリッド オーバーレイを切り替える DOM ツリーのバッジ
- デベロッパーが DOM オーバーレイの表示をカスタマイズできるサイドバー ペイン（ルールの色や幅の変更など）
- [スタイル] ペインの CSS グリッド エディタ
次に詳しく見ていきましょう。
グリッドの永続的オーバーレイ
DevTools のオーバーレイは、個々の要素のレイアウトやスタイルの情報を提供する強力なツールです。
この追加情報は、対象の要素の上に重ねて表示されます。以前は、DevTools が開いているグリッドにカーソルを合わせると、そのオーバーレイにボックスモデル情報が表示されますが、コンテンツのハイライト表示はグリッド アイテムのみに限定されていましたが、その理由は説明されていませんでした。CSS グリッド オーバーレイには、主に次の 2 つの要素を追加します。
- グリッドに関する有用な情報（作成済みのディメンションやギャップなど）を表示したい
- オーバーレイをスティッキーにして、複数のグリッドを同時に表示できるようにします。また、要素のスタイルが変更されると、グリッド情報を更新するオーバーレイを確認できます。
それぞれの目的を達成した経緯を振り返ってみましょう。
作成されたサイズと計算されたサイズ
CSS グリッドのデバッグで難しいことの一つは、グリッド トラックのサイズを定義する方法を多数あることです。たとえば、ピクセル値、パーセンテージ値、分数、繰り返し関数、最小最大関数を組み合わせて、さまざまな用途に使えるトラックサイズを作成できます。
.grid-cards {
display: grid;
width: 200px;
height: 300px;
grid-template-rows: 20% 0.3fr 100px minmax(100px, auto);
grid-template-columns: repeat(3, minmax(200px, 1fr));
}
しかし、これらの「作成元」トラックサイズを、ブラウザが計算した「計算済み」トラックサイズにマッピングするのは困難です。このギャップを埋めるために、オーバーレイには次の 2 つの情報を並べて表示しています。
ドットの前の文字列は作成された値で、ドットの後の文字列は実際の計算値を表します。
以前の DevTools には、作成された値を取得する機能がありませんでした。理論的には、DevTools で作成された値をなんらかの方法で解析し、CSS グリッド仕様に従って計算することはできましたが、これには多くの複雑なシナリオが含まれ、本質的には Blink の取り組みの重複にすぎないでしょう。そこで Blink のスタイルチームの助けを借りて、「カスケードされた値」を公開するスタイル エンジンの新しい API を利用できるようになりました。カスケードされた値は、CSS のカスケード後の CSS プロパティに対する最終的な有効な値です。これは、スタイル エンジンがすべてのスタイルシートをコンパイルした後、実際に値（パーセンテージや分数など）を算出するまでの間に、落札した値です。
現在は、この API を使用して、作成された値をグリッド オーバーレイで表示しています。
永続的オーバーレイ
CSS グリッド ツールを導入する前は、DevTools でのオーバーレイは単純でした。DevTools の [DOM Tree] ペインで、または検査対象のページの要素にカーソルを合わせると、その要素を説明するオーバーレイが表示されます。カーソルを合わせると、オーバーレイが消えます。グリッド オーバーレイについては、別の方法が必要でした。複数のグリッドを同時にハイライト表示し、グリッド オーバーレイをオンのままにして、通常のカーソルを合わせるとオーバーレイが機能します。
例:
ただし、DevTools のオーバーレイは、このような複数要素の永続的なメカニズムを念頭に置いて設計されていません（数年前に作成されました）。そのため、この機能を機能させるには、オーバーレイのデザインをリファクタリングする必要がありました。既存のハイライト表示ツールスイートに新しい GridHighlightTool を追加しました。これは後に、すべての永続的なオーバーレイを同時にハイライト表示するためのグローバル PersistentTool に進化しました。永続オーバーレイのタイプ（グリッド、Flex など）ごとに、それぞれの構成フィールドを永続ツール内に保持しています。オーバーレイ ハイライターが描画対象を確認するたびに、これらの設定も含まれます。
ハイライト表示する必要があるものを DevTools で制御できるように、グリッドの永続オーバーレイ用の新しい CDP コマンドを作成しました。
# Highlight multiple elements with the CSS Grid overlay.
command setShowGridOverlays
parameters
# An array of node identifiers and descriptors for the highlight appearance.
array of GridNodeHighlightConfig gridNodeHighlightConfigs
ここで、各 GridNodeHighlightConfig には、描画するノードとその描画方法に関する情報が含まれています。これにより、現在のカーソルを合わせたときの動作を妨げることなく、複数アイテムの永続的なメカニズムを追加できます。
リアルタイム グリッド バッジ
デベロッパーがグリッド オーバーレイのオンとオフを簡単に切り替えられるように、DOM Tree のグリッド コンテナの横に小さなバッジを追加することにしました。また、デベロッパーが DOM 構造内のグリッド コンテナを識別するのにも役立ちます。
DOM ツリーの変更
DOM ツリーに表示するバッジは Grid バッジだけではありません。そのため、できる限り簡単にバッジを追加できるようにしたいと考えています。DevTools で個々の DOM ツリー要素の作成と管理を行うクラスである ElementsTreeElement に、バッジを構成する新しいパブリック メソッドがいくつか更新されました。1 つの要素に複数のバッジがある場合、それらはバッジのカテゴリ別に並べ替えられ、同じカテゴリに属する場合は名前がアルファベット順に表示されます。使用可能なカテゴリには Security、Layout などがあり、Grid は Layout カテゴリに属します。
また、ユーザー補助機能のサポートが最初から組み込まれています。すべてのインタラクティブ バッジには、デフォルトと有効な aria-label を指定することが必須です。一方、読み取り専用バッジでは、バッジ名が aria-label として使用されます。
どのようにして、リアルタイムのスタイル アップデートを入手したのですか？
DOM の変更の多くは、DevTools の DOM ツリーにリアルタイムで反映されます。たとえば、新しく追加されたノードは DOM ツリーに即座に表示され、削除されたクラス名もすぐに消えます。グリッドバッジのステータスにも、同じ最新情報を反映させる必要があります。しかし、DOM ツリーに表示されている要素が計算されたスタイルの更新を取得したときに DevTools に通知を受け取る方法がないため、実装が困難であることが判明しました。要素がいつグリッド コンテナになるか停止するタイミングを知る唯一の既存の方法は、各要素の最新のスタイル情報について常にブラウザに対してクエリを行うことでした。これには法外に費用がかかります。
要素でスタイルが更新されたことをフロントエンドが把握しやすくするために、スタイル更新ポーリング用の新しい CDP メソッドを追加しました。DOM ノードのスタイルを更新するには、まず、トラッキングする CSS 宣言をブラウザに伝えます。グリッドバッジの場合は、ブラウザに以下の情報を追跡してもらいます。
{
"display": "grid",
"display": "inline-grid",
}
その後、ポーリング リクエストを送信します。[要素] パネルで DOM ノードのスタイル更新がトラッキングされると、ブラウザから DevTools に更新されたノードのリストが送信され、既存のポーリング リクエストが解決されます。DevTools でスタイルの更新について再び通知を受け取る必要がある場合、すべてのノードから常にバックエンドをポーリングする代わりに、このポーリング リクエストを送信できます。DevTools で新しいリストをブラウザに送信して、トラッキング対象の CSS 宣言を変更することもできます。
レイアウト ペイン
DOM ツリーのバッジは CSS グリッドの見つけやすさに役立ちますが、特定のページにあるすべての CSS グリッドのリストを表示し、レイアウトをデバッグするために、それらの永続オーバーレイを簡単にオンまたはオフに切り替えたい場合があります。そのため、レイアウト ツール専用のサイドバー ペインを作成することにしました。これにより、すべてのグリッド コンテナを収集し、グリッド オーバーレイのすべてのオプションを設定するための専用のスペースが得られます。この [Layout] ペインは、今後レイアウト負荷の高いツール（Flexbox、コンテナクエリなど）をここに配置することもできます。
計算されたスタイルで要素を検索する
[レイアウト] ペインに CSS グリッド コンテナのリストを表示するには、計算されたスタイル別に DOM ノードを見つける必要があります。これも単純ではないことがわかりました。これは、DevTools を開いたときにすべての DOM ノードが DevTools に認識されないためです。それどころか、DevTools が認識するのは少数のノード（通常は DOM 階層の最上位レベル）で、通常は Devtools DOM ツリーを開始します。パフォーマンス上の理由から、他のノードはその後のリクエストでのみ取得されます。つまり、ページ内のすべてのノードを収集し、計算されたスタイルでフィルタリングするための新しい CDP コマンドが必要になります。
# Finds nodes with a given computed style in a subtree.
experimental command getNodesForSubtreeByStyle
parameters
# Node ID pointing to the root of a subtree.
NodeId nodeId
# The style to filter nodes by (includes nodes if any of properties matches).
array of CSSComputedStyleProperty computedStyles
# Whether or not iframes and shadow roots in the same target should be traversed when returning the
# results (default is false).
optional boolean pierce
returns
# Resulting nodes.
array of NodeId nodeIds
これにより、DevTools のフロントエンドは、ページ内の CSS グリッド コンテナのリストを取得し、iframe と Shadow ルートを突き抜けて [Layout] ペインにレンダリングできるようになります。
まとめ
CSS グリッドツールは、ウェブ プラットフォーム機能をサポートする最初の DevTools デザインツール プロジェクトのひとつです。永続オーバーレイ、DOM ツリーバッジ、[Layout] ペインなど、DevTools の多くの基本的なツールが初公開され、Flexbox やコンテナクエリなど、Chrome DevTools の将来のレイアウト ツールへの道が開かれました。また、グリッド エディタと Flexbox エディタの基盤も築かれ、デベロッパーはインタラクティブにグリッドと Flexbox の配置を変更できるようになりました。後ほど説明します。
プレビュー チャネルをダウンロードする
デフォルトの開発ブラウザとして、Chrome Canary、Dev、Beta の使用を検討してください。これらのプレビュー チャネルでは、最新の DevTools 機能にアクセスしたり、最先端のウェブ プラットフォーム API をテストしたり、ユーザーが事前にサイトに関する問題を発見したりすることができます。
Chrome DevTools チームへのお問い合わせ
投稿内の新機能や変更点、または DevTools に関するその他の事項について議論するには、以下のオプションを使用します。
- crbug.com からご提案やフィードバックをお寄せください。
- DevTools の [その他のオプション]
> [ヘルプ] > [DevTools の問題を報告する] を使用して、DevTools の問題を報告する。 - @ChromeDevTools でツイートします。
- DevTools の新機能の YouTube 動画または DevTools のヒントの YouTube 動画で、コメントを記入してください。