Re: [csswg-drafts] [css-overflow-4] scrollbar-gutter is too complex (#4674)

@LeaVerou 

That's a good point about the `scrollbar-gutter` syntax.

It makes me wonder whether it is possible at all to find meaningful keyword names to express that behaviour in a clear way, or we would do better by looking into other ways to cover the most complex use cases.

My concern is that we might not be able to find a simple way to cover all scenarios, regardless of whatever route we take.

The `scrollbar-gutter` functionality that requires a separate property is dynamically replacing the empty gutter with a fixed scrollbar as the content grows, avoiding layout changes. If that is all that  `scrollbar-gutter` does, `stable` seems a reasonable name choice (as in _"your layout will remain stable"_).

At the moment, I am leaning towards having that simple syntax for `scrollbar-gutter` plus a collection of small flexible tools to cover more complex scenarios.

For example, let's say that we also had:

* a unit or env var(s) to get the scrollbar thickness
* a media query to detect that the UA is using fixed/overlay scrollbars
* selector(s) to identify the edge where the block scrollbar is placed on a given element.

Then, implementing e.g. the `stable force` behaviour could be done with something like:

    @media( <SCROLLBARS ARE FIXED> ) {
      .header[ <SCROLLBAR ON THE LEFT> ] {
        padding-left: <SCROLLBAR THICKNESS> ;
      }
      .header[ <SCROLLBAR ON THE RIGHT> ] {
        padding-right: <SCROLLBAR THICKNESS> ;
      }
    }

Maybe this would be a better approach? Not really "simpler", but perhaps clearer for Web authors.

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


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

Received on Monday, 17 May 2021 02:03:32 UTC