📑

Edgeの3DビューでDOM要素の重なり順を可視化する

2023/08/04に公開

CSS

Edge

tech

はじめに

CSSを書いていると、DOM要素の数が多かったり、そのネスト構造が深かったり、画面の特性上どうしてもz-indexなどによる優先順位の管理に苦労するケースは多々あると思う。
重なり方が意図通りではないとき、画面全体の要素の重なり順を可視化して調査する手段があると良いかなと思うけど、Edgeブラウザの3Dビューがそれに適していそう。

3Dビュー自体は2020年ぐらいには正式な機能としてEdgeに入っているもの。もともとFirefoxに同じような機能があって、それに触発されたものだったらしいけど、Firefoxの方ではもう提供されなくなっている。

From Firefox 47 onwards, 3D view is no longer available.

https://firefox-source-docs.mozilla.org/devtools-user/3d_view/index.html

また、Chromeでも近しい機能が提供されているけど、スタッキングコンテキストの調査に利用するのであれば、今現在はEdgeの3Dビューが良いかもしれない。

使ってみる

Edgeを開いている状態（Edgeのバージョンは115.0.1901.188）で、Command+Shift+IでDevToolsを開いてからCommand+Shift+Pでコマンドパレットを開き、「3d」と入力すると「3Dビューを表示」の選択肢が出てくるのでこれを選択する。

DevToolsで3Dビューのタブが表示されて、その中の「合成レイヤー」タブがこのように表示される。

確認したいのは要素の重なりについてなので、隣の「Zインデックス」タブを選択する。そうすると画面のDOM要素の重なりが3Dで可視化されているのが確認できる。

DOM要素が少なければDOMインスペクターで調査するので十分かもしれないけど、DOM要素が多い場合にはこのように全体を可視化できると調査が捗ると思う。
3Dビュー上の要素を選択すると対象要素がDOMインスペクターで選択されるので、画面上の対象要素を確認したいときにはそうすると良さそう。
なお、回転、拡大縮小、移動などの操作ができるようになっている。

単純にz-indexの値の大きさで重なる順番が決まるわけではなく、スタッキングコンテキストによって順序が変わり得るので、モーダルやドロップダウン等を多用しているアプリケーションにおいては、
画面全体でどの要素が3次元表現で上にくるかを管理したり調査したりするのに手間がかかる。そこで3Dビューを利用すると、画面全体の可視化がDevTools上でできるので直感的に把握ができる。

資料

GitHubで編集を提案

はじめに

使ってみる

資料

Discussion