[csswg-drafts] [css-values-4]? A way to explicitly account for scrollbar gutters (#9654)

tabatkins has just created a new issue for https://github.com/w3c/csswg-drafts:

== [css-values-4]? A way to explicitly account for scrollbar gutters ==
In #6026, we just resolved to remove the width of root scrollbars from the size of viewport units when `overflow: scroll` (or similar things, like `scrollbar-gutter: always`) were specified on the root.

In the discussion, @bramus brought up the issue of `scrollbar-gutter: always both-sides;`, and whether (1) we should subtract the opposite gutter from the viewport units as well. (2) If we do, is there any way to make something the size of the entire visible viewport, ignoring the gutter?

For (1) I think the answer is yes, we should subtract the size of both gutters there; ignoring the cyclic potential of `overflow: auto`, the viewport units should basically always be equivalent to %s on the root.

For (2), in most cases you don't need to worry about it. If it's a positioned element, `left: 0; right: 0;` will already work as desired, filling the whole space without caring about the gutter (but paying attention to the actual scrollbar, if needed). (iirc; the computer I'm typing this on uses overlay scrollbars so I can't check easily)

But if you, say, wanted a full-bleed header where it's an in-flow element that is going to use a negative margin to pull itself into the reserved gutter space, there is indeed currently no way to *accurately* do this right now; you can guess at the scrollbar size (and be generally correct if you just say `16px`), but you might be wrong.

@mirisuzanne (and others, in the past) suggested an `env()` for the default scrollbar width/gutter size, and that makes sense to me; it can respond to the same inputs that the gutter itself does (taking 'scrollbar-width' into account). 

This doesn't quite solve all problems, tho - if you want it to full-bleed into the gutter *on the scrollbar side* when there isn't a scrollbar, you'd need some way to detect that there's a scrollbar. I think having an `env()` that responds to this would introduce a cyclic dependency? cq units accomplish this, as seen in [several comments on #6026](https://github.com/w3c/csswg-drafts/issues/6026#issuecomment-1722407312), but they invoke heavier-weight machinery than we probably want to do here. This might be a step too far.

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/9654 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Wednesday, 29 November 2023 18:21:11 UTC