Damn, somebody plz develop a sane alternative to CSS.
It is actually fine. The damn libraries and frameworks make it wonky.
Consider the fact those frameworks exist in the first place. It suggests that people find the need to fix CSS in some way.
What does 100% mean in CSS? (2020)
31–40 of 72 posts
Re: What does 100% mean in CSS? (2020)
#32Re: What does 100% mean in CSS? (2020)
#33This is great, very high quality!
However, I'd also highlight the "padding" area in the box, so the "#Padding" example became more self-explanatory.
Re: What does 100% mean in CSS? (2020)
#34Earlier quoted context omitted.
It is actually fine. The damn libraries and frameworks make it wonky.
Consider the fact those frameworks exist in the first place. It suggests that people find the need to fix CSS in some way.
Because people still think that CSS is something beneath their dignity and not worth learning.
Re: What does 100% mean in CSS? (2020)
#35Re: What does 100% mean in CSS? (2020)
#36Damn, somebody plz develop a sane alternative to CSS.
To be fair, newer CSS elements such as flex do exist.
Re: What does 100% mean in CSS? (2020)
#37This 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?
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.
Re: What does 100% mean in CSS? (2020)
#38Wait there are sooo many more edge cases of percentages! When this article finished I think it should be half way through or even one third of 100% weirdness.
Examples: with flexbox and/or tables, 100% behaves differently. What about 100% vs 100vh/vw? This would be very nice to show here as well. As others note, background-position or background-size. Collapsing margins might be interesting, but probably not the best fit for this example. How other types of `display` interact with the 100% (e.g. `inline` just ignores it). As it's just very briefly touched, but how box-sizing affects the height/width. SVGs viewBox, canvas, hiding navbars on mobile, body's default width/height, the trick of `width: 100%; max-width: 1200px; margin: 0 auto;`, etc. there's such a vast amount of topics relating/breaking the concept of 100% in CSS that it's mind-numbing.
Re: What does 100% mean in CSS? (2020)
#39I'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...
Exactly, I do this at least once a year, enough that I don't need to search anymore for the actual CSS (I just need to try two variations when I mix `padding-top: ratio%` or `padding-top 1/ratio%`)