Re: [csswg-drafts] [css-env-2] env(scrollbar-inline-size) (#4691)

There are two separate problems:

1. How much space do scrollbars consume in the browser, generally speaking? In browsers with overlay scrollbars, that’s `0px` (because the scrollbars are overlaid). In browsers with classic scrollbars, that’s by default `15px` on macOS and `17px` on Windows. It could be more or less, depending on other factors.

2. Is a vertical classic scrollbar currently present on the web page?

@Schepp’s function answers the first question. The proposed `env(scrollbar-inline-size)` variable that’s the topic of this issue would also answer this question, if I understand correctly.

That’s good, but I’m also interested in the second question. Being able to answer this question in CSS would allow developers to solve the `100vw` issue. 

* If the scrollbar is present, then `100vw` is larger than the viewport width, so a full-width element needs to subtract the scrollbar size from its width.

    ```css
    /* classic scrollbar present */
    .full-width {
      width: calc(100vw - env(scrollbar-inline-size));
    }
    ```

* If the scrollbar is not present, then `100vw` is equivalent to the viewport width.

    ```css
    /* classic scrollbar not present */
    .full-width {
      width: 100vw;
    }
    ```

As you can see, developers cannot solve the `100vw` issue with `env(scrollbar-inline-size)` alone, and without knowing the answer to the second question. 

It does not look like the second question will be answered in CSS anytime soon (see https://github.com/w3c/csswg-drafts/issues/6026#issuecomment-1713253071). I think the best bet to make `100vw` less of a problem in browsers with classic scrollbars is to make `100vw` smaller when `scrollbar-gutter: stable` or `overflow-y: scroll` is set on `<html>`. That proposal is discussed in https://github.com/w3c/csswg-drafts/issues/5254. 

-- 
GitHub Notification of comment by simevidas
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/4691#issuecomment-1715038961 using your GitHub account


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

Received on Tuesday, 12 September 2023 06:01:03 UTC