@mia What I will say may sound surprising but I think people need to better understand the basic flow algorithm involving block and inline elements.
Many new developers start their code by using a ton of Flexbox and CSS Grid (because it's trending and everyone talk about them) while in reality they simply need to use the default block/inline elements and let the browser do the job.
@mia I would love to understand why margins collapse as they do. Why margins collapse not paddings. Imitating print design software? Any other reasons?
Also, I am very curious how browser calculates pixel fractions (ie calc(100px / 3)). I remember significant differences between the browsers in handling sub pixels.
@mia definitely grid. I designed a page that broke the box model a lot and I was told it was the perfect use case for css grid but after pulling my hair out for days I abandoned it and used flexbox.
@mia I’d like to have a better understanding of how to efficiently build rules so that they cascade and work well together - that is, how to organize the CSS code itself so that it works well as a “scaffolding” or “skeleton”.
@mia One thing that I’ll try to figure out in the next few days is why exactly did browsers vendors not make 100svw equivalent to the viewport width when a classic scrollbar is present. The svw is pretty much irrelevant in mobile browsers, so there would not be a conflict.
If 100svw was the smaller viewport width when a vertical classic scrollbar is present, then 100svh would be the smaller viewport height when a horizontal classic scrollbar is present. But 100svh already means “smaller viewport height when mobile browser’s UI is expanded”, so the same 100svh value would have two completely different behaviors in mobile vs. desktop browsers.
@mia I’ve been making websites for 27 years (16 professionally), and I still don’t fully understand the relationship between html and body. Granted, I haven’t really researched it, but every time I’m starting from scratch and remember that the body background color fills the whole thing even when it has margins and stuff, I think “gosh, that is so weird.”
@tylersticka@mia and it's not only related to html and body because both of them are as tall as your content and yet the background fill all the screen because everything is propagated to the canvas (yes another actor in play)
@mia - display: flow-root. What is it and why would I use it?
I theoretically understand flex-shrink/flex-grow, but don’t always intuit resulting behavior correctly.
People think of the difference between flex and grid as just 1D vs 2D, but it seems like flex is more oriented toward laying out items with their intrinsic sizes, and grid is more about the layout imposing sizing extrinsically on grid items. It’s not black and white, but the APIs tilt heavily in that direction. Why?
Add comment