scrollbar-color CSS property

[ramiy]

Description

Developers need a standard and cross-browser solution to style scrollbars for elements with overflow: scroll;.

There are two alternatives to style scrollbars, the widely supported non-standard ::-webkit-scrollbar-* pseudo-elements or the new standard scrollbar-* properties defined in the CSS Scrollbars Styling Module spec. Both alternatives are not cross-browser supported.

The non-standard ::-webkit-scrollbar-* pseudo-elements supported by all browsers except Firefox. While scrollbar-width and scrollbar-color properties are supported only by Firefox.

This is not an optimal situation for developers. We need a single solution implemented by all browsers.

Specification

https://drafts.csswg.org/css-scrollbars/

Open Issues

No response

Tests

https://wpt.fyi/results/css/css-scrollbars?label=master&label=experimental&aligned

Current Implementations

• Blink
• Gecko
• WebKit

Standards Positions

No response

Browser bug reports

https://bugs.chromium.org/p/chromium/issues/detail?id=891944

Developer discussions

No response

Polls & Surveys

scrollbar-gutter was mentioned in State of CSS 2023 and State of CSS 2022.

This CSS property is not related to this spec but it is related to scrollbars in general.

Existing Usage

https://caniuse.com/css-scrollbar
https://chromestatus.com/metrics/css/timeline/popularity/763
https://chromestatus.com/metrics/css/timeline/popularity/680

Workarounds

Non-standard ::-webkit-scrollbar-* pseudo-elements or JS libraries.

Accessibility Impact

No response

Privacy Impact

No response

Other

No response

[lukewarlow]

#419 issue for scrollbar-gutter that was referenced above

[lukewarlow]

FYI here's some links to somethings missing above:

WebKit scrollbar-color request and WebKit scrollbar-width request

WebKit scrollbar-color standards position and WebKit scrollbar-width standards position

Chrome Intent to Prototype CSS Scrollbars

[lukewarlow]

As for accessibility impact the standard properties should be a net positive for accessibility as you can use user styles to more easily undo the styles. There's also better integration with the likes of forced-colors mode (scrollbar-color is reset to auto).

[lukewarlow]

It's also worth being aware there's partial implementations of both scrollbar-color and scrollbar-width in Chromium and WebKit so the gap to interopability shouldn't be as big as if there was no implementation. (Safari is blocked by platform APIs for scrollbar-color however)

[karlcow]

This is a pressure point for Firefox webcompat.
https://github.com/search?q=repo%3Amozilla-extensions%2Fwebcompat-addon%20scrollbar&type=code

[foolip]

Scrollbar Styling is also a common answer in https://2023.stateofcss.com/en-US/usage/#css_interoperability_features, and in https://2022.stateofcss.com/en-US/usage/#interoperability_features_freeform before that.

[nt1m]

Can we split this proposal into scrollbar-width & scrollbar-color for evaluation?

[nt1m]

I split out scrollbar-width into its own proposal: #571

[lukewarlow]

Chromium intent to ship: https://groups.google.com/a/chromium.org/g/blink-dev/c/PkEsMirl2zE/m/ArphSa39AAAJ

[svgeesus]

Test results for existing WPT for scrollbar-color show interop between Chrome, Edge and Firefox with Safari trailing (23/38).

The specification does not have WPT annotations so I don't know how extensive the WPT coverage is (but it is a single property, so not too complicated).

The existing WPT all use sRGB colors (plus named colors and currentColor). There are no tests with wide gamut colors etc.

[svgeesus]

Safari failures seem to mainly relate to:

• CSS keywords like inherit, initial
• interaction with ::-webkit-scrollbar*

[nt1m]

Safari doesn't have scrollbar-color support enabled, because the visual effect of the property isn't implemented atm.

[lukewarlow]

Safari's pass rate will be inflated as well because many of the tests are for invalidation which appears to pass in safari (because the property has no actual effect).

I don't think WPT can effectively test the actual rendering as it's so platform dependent

[wpt-interop]

Thank you for proposing scrollbar-color CSS property for inclusion in Interop 2024.

We wanted to let you know that this proposal was not selected to be part of Interop this year.

This is because we got many more proposals than we could include in this year's project. Note that individual vendors may nevertheless choose to advance work in this area during the forthcoming year. We would welcome this proposal being resubmitted again next year if necessary.

For an overview of our process, see proposal selection. Thank you again for contributing to Interop 2024!

Posted on behalf of the Interop team.