search

w3c / csswg-drafts

CSS Working Group Editor Drafts
https://drafts.csswg.org/
Other
4.35k stars 641 forks source link

[mediaqueries-5] scrollbar-type and prefers-scrollbar-type #7420

Open bmathwig opened 2 years ago

bmathwig commented 2 years ago

With more user agents implementing overlay-style scrollbars, it's been clear that there is a site compatibility issue that emerges when content or interactive elements are obscured by elements of the scrollbar. To make things more complicated, users have the option to toggle between overlay scrollbars and classic scrollbars via the "Always show scrollbars" operating system settings. This means a page author cannot correctly determine the best course of action to prevent interactive elements from becoming non-interactable.

To help alleviate this issue, I propose adding two new @media descriptors:

@media (scrollbar-type: overlay | classic) { ... } This query will allow a page author to adjust padding and margins on content that would otherwise be obscured by an overlay scrollbar, but would be just fine with a classic scrollbar. A scrollbar-type can potentially be changed via a future extension to css-scrollbars-1 (#7421).

@media (prefers-scrollbar-type: overlay | classic) { ... } This query represents the preferred scrollbar type of the user and what they've set in their user preferences.

bmathwig commented 1 year ago

Pinging this thread.

There is some interest in exposing this information via CSS as filed under a Chromium Bug: https://bugs.chromium.org/p/chromium/issues/detail?id=1012117#c13

tabatkins commented 1 year ago

The scenarios you mention are what 'scrollbar-gutter' is designed to solve. In particular, if you want to avoid placing content underneath an overlay scrollbar, scrollbar-gutter: always; should do the job, ensuring that some space is reserved for the overlay scrollbar to live in.

Do you know if this is insufficient for any use-cases you're worried about?

bmathwig commented 1 year ago

Such a scenario would be moving a single element away from the margin while keeping the overlay of content intact on the containing block; no gutter.

It's insufficient in that scrollbar-gutter: stable does not reserve space for overlay scrollbars (per https://w3c.github.io/csswg-drafts/css-overflow/#overlay-scrollbars). If css-overflow-4 is going to solve it with scrollbar-gutter: always, then we should get consensus on that. Though, I do believe the more 'passive detection' approach would be better than a pro-active always approach.

tabatkins commented 1 year ago

Oh lol we changed the value from its definition in the /TR spec, ok.

Then yeah, we should have some ability to detect this, definitely.

You seem to be suggesting two separate MQs - what difference do you see between the two in usage?

bmathwig commented 1 year ago

If we decide to skip scrollbar-mode in #7421, we won't need scrollbar-type. The only one we'd need is prefers-scrollbar-type which is the preference setting in the OS or the Browser appearance settings.