- From: Zachary Haber via GitHub <sysbot+gh@w3.org>
- Date: Wed, 17 Jul 2024 23:21:01 +0000
- To: public-css-archive@w3.org
ZachHaber has just created a new issue for https://github.com/w3c/csswg-drafts: == [css-scrollbars] Scrollbar Hover/Interaction Colors == Spec: https://www.w3.org/TR/css-scrollbars-1/#scrollbar-color Opening a new issue as suggested in: https://github.com/w3c/csswg-drafts/issues/9826#issuecomment-1909275607 For the sake of convenience, I'll refer to the hover as hovering over the thumb/track's arrow buttons, and interaction as holding mousedown on the thumb/track's arrow buttons. The `scrollbar-color` property has a major pitfall: the appearance changes when hovering/interacting with the scrollbars. There are significant differences between firefox and chromium, but the biggest problem is that in chromium browsers, the scrollbars appear non-interactive if you set a color. There is no change when hovering/interacting with the scrollbar - thumb or arrow buttons. There is also no way to address this issue in chromium browsers with css. Chrome itself has absolutely no interaction changes, while edge reduces the size of the arrows when you are actively scrolling with them. It also has fairly minimal difference between normal and hover states for the thumb. In Firefox, however, there are hover and interaction colors based on the thumb color and track color, though even for the same thumb/track combination, it can end up with different hover/interaction colors than the default for a background. For safari I'm unsure as they don't have full support for `scrollbar-color` yet. I put together [examples of behaviors](https://codepen.io/ZachHaber/pen/gONPRrb) with matching colors for light/dark scrollbars for chrome/edge/firefox to help highlight how each of the browsers approach it - interesting to note is that unlike chromium, firefox styles the scrollbars based on the color of the background and not the `color-scheme` setting. |interaction|Chrome|Edge|Firefox|Safari| |-|-|-|-|-| |Base||||| |Base Thumb Hover||||| |Colored Thumb Hover|||| ----- The solutions I can think of currently are: 1. Allow for more customization of the scrollbars via new properties 2. Standardize something akin to firefox's behavior so that all browsers will have a general approach to ensure that the custom scrollbar colors feel like normal scrollbars. 3. A mix of 1 & 2: default browser behavior, but allowing to override it via properties. For 1 (customizing the scrollbars): there are several different properties that appear for full customization akin to what the browsers do by default currently: For the thumb: `thumb-hover-color`, `thumb-interaction-color`. At a minimum for this solution, only these two would be needed. The track parts don't even exist in all browsers (apple has the overlay/minimal scrollbars by default). For the track, both arrow (`-arrow-color`) color and track `-color` colors are needed: `track-button`, `track-button-hover`, `track-button-interaction`, `track-button-disabled` (when fully scrolled in that direction). These could be in two separate properties, or one with two colors for the arrow and for the button. For 2 (standardizing behavior): the specification would just have to make sure that there's some sort of indicator based on hovering/interaction for all of these pieces with a focus on trying to keep an eye on accessibility - whether to lighten/darken for best contrast is complicated and has been discussed many times from what I've seen. I'm not sure how specific this would have to be to make cross-browser behavior consistent, or if full consistency is desired/expected. For 3 (mix of 1 & 2): Mainly just that the standardizing exists, but you can take control of it explicitly in the css, if you want your design to be 100% consistent between browsers - or if the defaults don't work how you'd like. For the most part, specifying any of the specific extra properties would likely end up as an opt-out for the browser behavior, since, for example, it would be difficult to provide a reasonable interaction color if the hover color is specified and wildly different from the base color. Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/10591 using your GitHub account -- Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config
Received on Wednesday, 17 July 2024 23:21:02 UTC