will-r-s-hansen
Eric A. MeyerBRING BACK THE 3D PAGE INSPECTOR YOU COWARDS
For those of you new to this concept: https://firefox-source-docs.mozilla.org/devtools-user/3d_view/index.html
Maybe I can convince the WebKit team to build this for VisionOS.
It turns out there’s something *very* similar in Microsoft Edge’s Devtools, though it appears to use floating panes instead of stacked boxes (maybe? the screenshots are unclear and other screenshots I’ve seen appear to be pane-based).
Regardless, it might be of use — particularly since they **also** added a `z-index` stacking context visualizer! https://learn.microsoft.com/en-us/microsoft-edge/devtools-guide-chromium/3d-view/
llatan is outta hereI had forgotten about that visualization tool.
Rob C@Meyerweb Firefox' also had z-index floaters.
jimray
Johannes ヨハネス@Meyerweb Safari has it, but only as layers in the Web Inspector without their actual contents.
Candy Apples Annie 🎄@Meyerweb gosh I loved that thing
@anniegreens It was a dark, dark day when they removed it.
@Meyerweb It wasn't just a silly gimmick to me. It was good for seeing the complexity and levels of nesting, something which today's JS-heavy div-tastic sites could benefit from. It helped me visualize designs, as my brain tended to think that way, back in the days of designing in the browser (which I still mostly do).
Sara Joy 
@anniegreens @Meyerweb oh my gosh can you imagine the "modern" websites with the thousands of nested divs - maybe it was too much and why they had to can it!
May Keable 🏳️🌈🏳️⚧️@anniegreens @Meyerweb yeah, I used the heck out of it.
Josh 
@Meyerweb it was both genuinely useful aaaand you looked cool as fuck using it
@joshbal4 RIGHT?!?!?
Denian@Meyerweb @joshbal4 The main problems I see are that most "modern" websites would be insanely high stacks of generated nested container elements. and that z-layers are no longer the same as parent/child relations. But I'm certain somebody who knows more details about website rendering processes could easily list more than those.
@Meyerweb @joshbal4 Please note that I completely and utterly loathe CSS and its countless arbitrary rules about what does or doesn't work together, so my example might not be "valid", or it might result in unspecified behaviour, or summon the very demons that make up said arbitrary rules. In the latter case, I happen to believe that they'll take any sufficiently potent mind altering drugs instead of human souls to pay for the summoning and send them back.
@Meyerweb There is an attribute called "max-width". Any sane person looking at it will immediately say "hey, look - this will limit how wide this element can become!" It only works for specific elements. It is NOT called "max-width-of-certain-elements".
some values of "width" do not work depending on how the parent width is set. Aside from values like "available", this also includes percentages in certain constellations.
These are just two arbitrary rules, and they affect "obvious" attributes.
@Meyerweb And the worst part is that all of those weird interdependencies are just assumed to be known and you have to search for "why does XYZ not work" in the most obscure places just to be told that it only works if the grandparent element is "display: curved;", contains exactly 3 children and is at least 20 pixels from the top of the screen, otherwise it will randomly do something else... or nothing at all... but affect OTHER attributes down the line... Seriously, WTF???
@Denian Again, these rules aren’t arbitrary. They’re constructed against the very unique rendering environment of the web. Usually, they are the way they are because the alternatives would be worse, often in ways that aren’t obvious at first glance.
I’m not going to tell you have to like how CSS works, but I am going to tell you that its workings are generally well-reasoned and the result of a lot of thought by people far smarter than either of us.
@Meyerweb Again, I'm talking about "max-width does not reliably limit the width". I'm not even blaming them for obscure fuck-ups like not researching the hue-rotate filter and how the only implementation, which has been copied over and over, does not actually rotate hue values. I am talking about how simple, repeated problems require insane amounts of research because you need to know all thirty ways of solving them and when to use which!
@Meyerweb I don't effing care if the element is "display: inline;" - I tell it "you cannot not grow wider than X", using an attribute that has a very generic name that tells me it SHOULD allow me to do that, but no - I have to dig through a dozen pages until ONE person manages to mention that it was only added for flex elements, or something like that. I can think of NO reason why THIS attribute should NOT work on other elements (that can have a width - I guess that's a reasonable restriction).
laura lemay@Meyerweb What on earth I missed this entirely
@lemay It was in Firefox 11 – 46! And never, ever should have been removed. https://firefox-source-docs.mozilla.org/devtools-user/3d_view/index.html
Michal Migurski 🍉
Jon Koops 🇪🇺@Meyerweb Wow! I never saw that, that was in my hiatus period I guess.
Zach Leatherman@Meyerweb good for finding deep caverns of HTML
Gareth Lewin@Meyerweb can you imagine what a react app would look like with a thousand divs nested under each other?
@gareth I directly blame the explosion of React-ish page structures on the removal of this feature.
I am only partly joking about this.
Jason Lawton 
Chris Martin@Meyerweb Can't, on a modern webpage it would be a mile-high pile of redundant react nodes
@chris__martin So maaaayyyyybe that would get some people to rethink their choices?
(Yeah, okay, probably not.)
Michael Knepprath
James Ross@Meyerweb Has anyone done this but with CSS stacking contexts? That would be even more useful to me.
@twpol I’m not aware of anyone having done so. I think I tried it at one point and it didn’t go well, but that was yonks ago and maybe browsers and GPUs have gotten to the point where that would work now?
Terence Eden@Meyerweb I was thinking about that the other day. It really was the best way to understand what my crappy CSS was doing.
It's a pity they killed Firefox Reality for the Oculus - that would have been awesome in VR.
@Edent Firefox Reality has been continued as @WolvicXR (https://wolvic.com/), and @bkardell and I were just talking about putting web pages fully into VR space, which made me think of the 3D inspector in full VR, which got me to toot about the inspector, which got you to reply, and now here we are!
Tom Walker@Meyerweb I wonder if you could roughly replicate this using a transform rotate/skew on the page and then translateZ forward on every div
@tomw I’ve actually tried this and it’s not nearly as clear, because the elements don’t have sides so they don’t stack up like boxes. It’s just a bunch of panes floating in space. And, at least at the time I tried, adding dummy elements to every element to rotate them into being box-sides was… let’s call it “computationally taxing”.
@Meyerweb Interesting - I hadn't considered before that we can move elements on the z-axis but have no way to set a z-thickness for them
@tomw Like with most things, it’s hardly ever a problem, until it suddenly is.
Josh Kramer@jkjustjoshing @tomw And also can figure out which two sides are in view so you can push the pseudos to the correct spot. Sounds suspiciously like math to me.
Jon Keegan@Meyerweb Oh how I loved this
@jonkeegan I was SO MAD when I found out they’d removed it, I can’t even tell you.
@Meyerweb I would love some VR version of this as a web scraper where you could physically grab the elements you want to scrape
Noah Liebman
@noleli Similar, but not the full experience. The 3D inspector turned every element into a box with depth and color-coded sides. Panes hanging in space, while nifty, aren’t nearly as clear nor as information-rich.
Also, where is that? I don’t have it as an option in my copy of Chrome 120 (macOS).
@Meyerweb Oh, hm, that’s a shame.
And yeah, now that I’m looking I can’t find it in Chrome, either. It’s in Edge, so assumed was in all Chromium browsers. There are a bunch of options that seem like they would do more what you’re describing, but I can’t get it to work.
Waldo Jaquith@Meyerweb OMG I hadn't thought of this in forever
Florens Verschelde@fvsch Almost! Theirs appears to be panes floating in space, not boxes that stack. It’s a small difference but an important one, as panes floating in space (which I’ve done using CSS once or twice) are harder to visually parse. But they *did* create a thing to visualize stacking contexts, which is quite cool.