Re: [w3ctag/design-reviews] CSS Scrollbars: scrollbar-color, scrollbar-width (#563)

Hi, @kenchris,

Thank you very much for your comments. I apologize that it has taken me a few days to address them.

Point **1** is a reasonable request. It is important to know whether authors can be confident that those values will deliver similar outcomes across different systems. As far as I have seen, there isn't a good visual reference for the `light` and `dark` values yet. The specification leaves a lot of room for implementors in terms of visual style, but the one browser that has implemented the feature so far (Firefox) does not support `light` and `dark`.

As for point **2**, I have already opened an issue along similar lines: https://github.com/w3c/csswg-drafts/issues/5651

My proposal would be that, when only one color is provided to `scrollbar-color`, it would be used by the UA to automatically create a color scheme for the scrollbar (to "tint" it, so to speak). This would allow authors to easily style scrollbars while ensuring adequate accessibility.

Another advantage I see for the "tint" semantic is that it is more flexible in case the scrollbar has more (or fewer) visual elements than a track and thumb.

Regarding point **3**, as I understand it this functionality has been intentionally kept out of the specification because of lack of consensus, one reason being that on some operating systems the type of scrollbar (static or overlay) responds to a user preference.

Nevertheless, there is recognition that in some cases authors have strong reasons to implement their own scrolling solution: for those cases, `scrollbar-width: none` was proposed as a way to avoid the hacks that authors were (and are) resorting to in order to hide the native scrollbar.

Likewise, sometimes authors would like to prevent changes in their layout as scrollbars appear and disappear, like in your YouTube example. A good way to achieve that will be the [`scrollbar-gutter` property](https://drafts.csswg.org/css-overflow-4/#scrollbar-gutter-property).

-- 
You are receiving this because you are subscribed to this thread.
Reply to this email directly or view it on GitHub:
https://github.com/w3ctag/design-reviews/issues/563#issuecomment-774053100