New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[css-scrollbars][css-scrollbars-1] Use or accept IE initial values for scrollbar-*-color properties #1956

tantek opened this Issue Nov 8, 2017 · 8 comments


None yet
6 participants

tantek commented Nov 8, 2017

IE uses named System Colors as defaults for each of the scrollbar color properties (as noted in , equivalent to:

html { 
    scrollbar-face-color: ThreeDFace;
    scrollbar-shadow-color: ThreeDDarkShadow;
    scrollbar-highlight-color: ThreeDHighlight;
    scrollbar-3dlight-color: ThreeDLightShadow;
    scrollbar-darkshadow-color: ThreeDDarkShadow;
    scrollbar-track-color: Scrollbar;
    scrollbar-arrow-color: ButtonText;

Should we use those literal value keywords as initial values for each property respectively instead of normal, or specify and accept both?

Minimal compat is to only specify and use the IE implemented initial values, but they're ugly (CamelCase instead of CSS shish-case), not obvious (though 'initial' keyword is a workaround for having to remember them), and hard to remember (slightly different for each property).

Currently the spec uses 'normal' instead (more like usual CSS, more obvious, easier to remember), but this is not implemented by anyone.


This comment has been minimized.

Zefling commented Nov 15, 2017

Why use the very old IE approach for scrollbars?
I think that the Webkit approach gives more possibilities:


Blog :
Example :


This comment has been minimized.


upsuper commented Nov 15, 2017

Because we don't want more possibilities.

That exposes too many details about scrollbar which would limit UA's ability from using the appearance of OS's native scrollbar. Windows, Mac, and some Linux systems all have different scrollbar style, and some of them are not able to be described in the model of the WebKit pseudo-element way.

Actually, Apple exposed them by accident when they wanted to use it in their internal application, and they want to unship it if possible.

So we just collect the common usecases why people want to style scrollbar, and provide things which are just enough to fit those usecases, so that UAs are still able to use OS's native scrollbar appearance and allow OSs to evolve their scrollbar design.


This comment has been minimized.

mgol commented Nov 16, 2017

The danger of limiting the ability to style scrollbars is web devs will again resort to dumping native scrollbars for custom re-implementations which usually worsens the user experience more than when they're styled using CSS. This applies more to pages using very specific, far from native design. See #1969, someone in a call mentioned a page for an 8-bit game trying to ensure consistent styling etc. Width & color will not be enough to cover them all.

I hope this is taken into account during the decision making.


This comment has been minimized.

nt1m commented Nov 16, 2017

@upsuper @tantek Some of the properties inside this spec don't make sense on OSX and Linux. Terms like shadow/highlight/3dlight/darkshadow are pretty Windows oriented. These are properties that were exposed in IE, and turned the scrollbars into Windows Classic (95) scrollbars.

If we do plan to expose scrollbar properties, can we at least expose something sensible that's useful to web developers ? Web developers don't want to style scrollbars to end up with Windows Classic styling.

It doesn't have something as elaborate as the webkit approach, but it can at least be more useful than giving Windows 95 style scrollbars.


This comment has been minimized.


upsuper commented Nov 16, 2017

@nt1m That's something we want to change, see #1960.


This comment has been minimized.


upsuper commented Nov 16, 2017

@mgol this spec is mostly for addressing common requirements of scrollbar styling.

Specific pages can have very specific design, which can be way beyond the model provided from the WebKit scrollbar model, see for example Google Wave's scrollbar. We should probably provide an API to allow authors to create custom scrollbar with native performance more easily at some point, but that's a separate thing.

lahmatiy added a commit to lahmatiy/data that referenced this issue May 9, 2018


This comment has been minimized.


lahmatiy commented May 9, 2018

A few notes:

  • Initial value for scrollbar-base-color property is missed.
  • Those values are members of Deprecated CSS System Colors that UA must support. In general, implementation of those values may not be required since it should be already in UA.
    Pay attention to the note from the spec:

These color names have been deprecated, however, as they are insufficient for their original purpose (making website elements look like their native OS counterparts), and represent a security risk, as it makes it easier for a webpage to "spoof" a native OS dialog.


This comment has been minimized.


upsuper commented Aug 29, 2018

I think we can close this now. We would use auto by default for scrollbar color properties and allow implementations to decide what's the best fit.

@upsuper upsuper closed this Aug 29, 2018

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment