100% mean that you will spend an hour trying to find that element with a margin that causes a page to wobble when you scroll it.
What does 100% mean in CSS? (2020)
61–70 of 72 posts
Re: What does 100% mean in CSS? (2020)
#62This 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.
This is how I know you haven't touched CSS since the early 2000s - the bad old days are gone, flex and grid have been here for years and years.
Re: What does 100% mean in CSS? (2020)
#63Re: What does 100% mean in CSS? (2020)
#64Re: What does 100% mean in CSS? (2020)
#65This 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?
Doing it in browser. Android, iOS, native macOS apps, QT, none of them have the insanity of layout that is CSS. I bet most other frameworks don't as well, but those are the 4 I'm familiar with. CSS is the odd man out when it comes to being utter shit at layout, and yes that is including flexbox and grid.
Re: What does 100% mean in CSS? (2020)
#66This 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.
I’m not sure it’s a waste. Yes, CSS layout is complex, bordering on stupidly complex. But I’m not aware of any other reflowable layout system of comparable power. The sheer amount of pain it takes to wrangle something like CSS floats out of TeX—on a fixed-size page!—certainly makes me appreciate just how difficult the problems CSS solves are.
Though it sure would be nice if people were exploring other approaches to reflowable layout without tying themselves to CSS and modern browsers’ codebases.
Re: What does 100% mean in CSS? (2020)
#67> The surrounding blue box is the parent element. (R: 93, G: 200, B: 195) That's more green than blue. When you consider that humans have stronger green color preceptors it's definitely green.
I would say turquoise cause it is probably the closest named color used in my language. I can recommend a dive into the field of blue-green distinction science.
Re: What does 100% mean in CSS? (2020)
#68In 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.
i'd have to poke around to be sure, but i have a suspicion:
box-sizing: border-box;
width: 400px;
Re: What does 100% mean in CSS? (2020)
#69The slider knobs aren't vertically centered for me on that site (iOS Safari).
Should've used instead of reinventing that particular wheel. They may not have liked the need to use multiple vendor-specific pseudo-elements to style them.
Re: What does 100% mean in CSS? (2020)
#70and 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 - this method requires the element have a height defined; or a height derived from a declaration like `aspect-ratio`
That's because `inset: 0rem` is equivalent to `top: 0rem; right: 0rem; bottom: 0rem; left: 0rem;` - which is a well know technique to force 100% height.