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

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

== [css-env-2] env(scrollbar-inline-size) ==
Scrollbars are a system provided, dynamic, and out-of-developer's control component that can "get in the way" by consuming **unpredictable amounts of space**. It'd be nice if the platform provided an environment variable that held the contextual system width value for scrollbars so that developer could use `calc()` to mitigate unpredictability. 

I've gently proposed using logical property syntax for the env variable name, since I feel this is the language used to talk about sizing on the web:

```css
env(scrollbar-inline-size)
```

Here's a great bad example of how folks are working around this today:
(aka, negative margins)

```js
var checkScrollBars = function(){
    var b = $('body');
    var normalw = 0;
    var scrollw = 0;
    if(b.prop('scrollHeight')>b.height()){
        normalw = window.innerWidth;
        scrollw = normalw - b.width();
        $('#container').css({marginRight:'-'+scrollw+'px'});
    }
}
```

All in all, having access to the scrollbar width would give folks the values they need to gracefully handle the dynamic aspects of scrollbars with just CSS. 

I assume there's aspects to this work that overlap with custom scrollbars, so this env var would need to be a property that can update at runtime yeah? Help me think out the rest of the fringe edge cases, as well as use cases where scrollbar width would be super helpful in your layouts/ui. Thanks!

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

Received on Wednesday, 22 January 2020 16:47:35 UTC