Live data from Hacker News

What does 100% mean in CSS? (2020)

wattenberger.com

41–50 of 72 posts

Re: What does 100% mean in CSS? (2020)

#43
What's going on with the the 'f' in the first `.self {`? I struggled to convince myself it wasn't a speck on my screen even with it following my scroll. The later boxes don't feature it.

Edit - Ah! - it's clear with the 'height' slider dragged up: it's one of the dots from the background (except it isn't in the background) grid.

Re: What does 100% mean in CSS? (2020)

#45

This is why I knew how to be a frontend engineer at one point in life but never pursued it past the early 2000s. The brainpower wasted on web layout is immense.

What about UI development is a waste?

the amount of blood sweat and tears spent trying to center something before flexbox

Re: What does 100% mean in CSS? (2020)

#46

Earlier quoted context omitted.

What about UI development is a waste?

When you want to do something simple but you have to bring the entire philosophy of CSS into consideration to figure out what the right way to do it is.

Its a common misconception that CSS is easy, that's its not a programming language. Its however one of the most difficult to understand. You can write CSS a whole career without understanding the basics, and responsive design made it exponential harder. And there are popular anti-patterns such as trying to overwrite an existing css file... But if you do learn it - its very powerful, and much better then defining design rules in JS or XML or a graphical design tool.

Re: What does 100% mean in CSS? (2020)

#48
post #6

Just a little correction: percentage values are computed based on the element's _containing block_, not parent. Most of the time, an element's containing block is its parent, but not always. For more on this: https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_...

I found the rule about absolutely positioned elements interesting given that I often thought their containing block was the closest relatively positioned parent. As outlined in that documentation, though, it's just the closest element that is not statically positioned.

Oh, wow. That explains a few baffling bugs I’ve seen.

Re: What does 100% mean in CSS? (2020)

#49
In my limited experience I find CSS examples always make things look simple, but then in reality I'm forced to do something stupid like this for a 400px canvas:

            left: 50%;
            margin-left: -205px;
            border: 0px;
            width: 410px;
Because when sized to 400px it always clips 10 pixels of the canvas.

Re: What does 100% mean in CSS? (2020)

#50
post #29

This is why I knew how to be a frontend engineer at one point in life but never pursued it past the early 2000s. The brainpower wasted on web layout is immense.

Responsive design did this. Early 2000s there was only 1024 x 768px or a little above maybe.

The quest for equal height columns and people thinking “how hard can it possibly be to vertically center a div?” predate responsive design
Post reply on HN