Not gonna lie, the last example made me happy, but my practical side was screaming "just use flexbox, jeez"
Or table
What does 100% mean in CSS? (2020)
11–20 of 72 posts
Re: What does 100% mean in CSS? (2020)
#12The slider knobs aren't vertically centered for me on that site (iOS Safari).
Same here on Android Chrome
Re: What does 100% mean in CSS? (2020)
#13and the interesting "trick" I learnt the other day for fixed/absolute positioning, if you add inset:0rem; margin: auto; it will center vertical and horizontal it without having to translate it courtesy of Kevin Powell - https://www.youtube.com/watch?v=HOM47v73yG8 ( who I've found to be an amazing resource for learning all kinds of CSS info )
Note that inset is a very recent introduction, only supported by Firefox 66+, Chrome 87+ and Safari 14.1+ (14.5+ in iOS). It will take quite a while to use it without thinking.
Re: What does 100% mean in CSS? (2020)
#14This 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.
Re: What does 100% mean in CSS? (2020)
#15I'm a little embarrassed to admit that I've been working with this stuff for decades and I just now found out that margin and padding top is based on parent width if expressed in percentages. I'm only a little embarrassed because who expresses margins in percentages anyway.
Re: What does 100% mean in CSS? (2020)
#16This 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?
Re: What does 100% mean in CSS? (2020)
#17Sadly the most interesting CSS percentage mechanic is missing there: background-position Unlike all other cases, here `background-position-x: [25]%` means: > "Place image so its inner left [quarter] boundary matches inner left [quarter] boundary of its container." So 0% = align left edges, 100% = align right edges, 50% = align centers (= center) etc. Super intuitive on the first sight, but I was quite surprised how t…
I mean… how else would you implement it? In GW-BASIC (when I was 10) I created a windowing system and that’s pretty much the only way to do it: Calculate the gap remaining among the parent and apply the rule on the parent. Otherwise you always end up mistaking the calculation and having your element overflow.
Re: What does 100% mean in CSS? (2020)
#18I'm a little embarrassed to admit that I've been working with this stuff for decades and I just now found out that margin and padding top is based on parent width if expressed in percentages. I'm only a little embarrassed because who expresses margins in percentages anyway.
You never needed to set some flexible containers dimensions to have some precise aspect ratio? Up until very recently [1] the "padding hack" used to be the only option…
https://css-tricks.com/aspect-ratio-boxes/
[1] Recently `aspect-ratio` got into evergreen browsers: https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-rati...
Re: What does 100% mean in CSS? (2020)
#19and the interesting "trick" I learnt the other day for fixed/absolute positioning, if you add inset:0rem; margin: auto; it will center vertical and horizontal it without having to translate it courtesy of Kevin Powell - https://www.youtube.com/watch?v=HOM47v73yG8 ( who I've found to be an amazing resource for learning all kinds of CSS info )
Note that inset is a very recent introduction, only supported by Firefox 66+, Chrome 87+ and Safari 14.1+ (14.5+ in iOS). It will take quite a while to use it without thinking.
Why not you polyfill it if you care enough to hesitate?
Re: What does 100% mean in CSS? (2020)
#20Sadly the most interesting CSS percentage mechanic is missing there: background-position Unlike all other cases, here `background-position-x: [25]%` means: > "Place image so its inner left [quarter] boundary matches inner left [quarter] boundary of its container." So 0% = align left edges, 100% = align right edges, 50% = align centers (= center) etc. Super intuitive on the first sight, but I was quite surprised how t…
I mean… how else would you implement it? In GW-BASIC (when I was 10) I created a windowing system and that’s pretty much the only way to do it: Calculate the gap remaining among the parent and apply the rule on the parent. Otherwise you always end up mistaking the calculation and having your element overflow.
How else, you ask? As a percentage of the background clip box would be the obvious possibility. It’d be less useful, but it’d be arguably more consistent with percentages just about everywhere else. (Though, being based on the element’s background clip box rather than its containing block’s content box, it would still be somewhat different.)
It’s common for people to wish that percentages worked this way with other properties, because in some cases that’d be useful, but they don’t. (Example: margin-based centring, `width: 20em; margin-left: calc(50% - 10em);`.)