What does 100% mean in CSS? (2020) • Hacker News Board

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

#51

Post by skhr0680 » Fri, Jul 09, 2021, 10:36 AM UTC

continuational wrote: post #8

The slider knobs aren't vertically centered for me on that site (iOS Safari).

Welcome to CSS

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

#52

Post by azangru » Fri, Jul 09, 2021, 10:42 AM UTC

I still find it hard to believe that there is no CSS rule for "100% of viewport width, excluding the vertical scrollbar width".

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

#53

Post by [deleted] » Fri, Jul 09, 2021, 10:42 AM UTC

myfonj wrote: post #7

Sadly 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…

[deleted]

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

#54

Post by scotty79 » Fri, Jul 09, 2021, 10:48 AM UTC

myfonj wrote: post #7

Sadly 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…

So it's equivalent to setting:

    left: x%;
    top: y%;
    transform: translate(-x%, -y%);

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

#55

Post by oefrha » Fri, Jul 09, 2021, 10:52 AM UTC

azangru wrote: post #52

I still find it hard to believe that there is no CSS rule for "100% of viewport width, excluding the vertical scrollbar width".

scrollbar-gutter

https://developer.mozilla.org/en-US/docs/Web/CSS/scrollbar-g...

Not something you can actually use though.

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

#56

Post by [deleted] » Fri, Jul 09, 2021, 10:57 AM UTC

[deleted]

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

#57

Post by The_rationalist » Fri, Jul 09, 2021, 12:31 PM UTC

azangru wrote: post #52

I still find it hard to believe that there is no CSS rule for "100% of viewport width, excluding the vertical scrollbar width".

Doesn't 100vw exclude the scrollbar?

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

#58

Post by jffry » Fri, Jul 09, 2021, 12:33 PM UTC

codelord wrote: post #44

> 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.

You might be interested in this article: https://en.wikipedia.org/wiki/Blue%E2%80%93green_distinction...

"Definitely" green is a difficult assertion to make universal. It's true that it has slightly more green than blue in the sRGB space, but the blue/green boundary is not as culturally universal as you may expect

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

#59

Post by leephillips » Fri, Jul 09, 2021, 12:33 PM UTC

codelord wrote: post #44

> 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.

That puzzled me too (“that’s not blue, that’s more like aqua”). I thought it was my monitor or something.

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

#60

Post by seumars » Fri, Jul 09, 2021, 12:37 PM UTC

optimusclimb wrote: post #14

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.

CSS grid and flexbox have resolved most of those issues though.