View source for Css-scrollbars

{{stub}}

'''<dfn>CSS Scrollbars</dfn>''' is a spec adopted as an editor's draft by the [[CSSWG]] during their [[TPAC/2017]] f2f meeting, 
and officially published starting with a FPWD on 2018-09-25:
* https://www.w3.org/TR/css-scrollbars-1/
__TOC__

;Editor's Draft
:https://drafts.csswg.org/css-scrollbars-1
;TR
:https://www.w3.org/TR/css-scrollbars-1/
;Repo
:https://github.com/w3c/csswg-drafts/tree/master/css-scrollbars-1
;Issues
:https://github.com/w3c/csswg-drafts/labels/css-scrollbars-1

== Use-cases ==
Use-case for color and/or width modification of scrollbars.

=== Dark colored webapp designs ===
Dark colored web app designs are particularly sensitive to the visual noise created from the intrusively high-contrast default platform scrollbars.
==== TweetDeck ====
* TweetDeck: https://github.com/webcompat/web-bugs/issues/9791, https://webcompat.com/issues/9791
** need direct link(s) to screenshots

Note that TweetDeck appears to only use three colors (but setting on multiple properties)
* scrollbar-face-color: #e1e8ed;
** also: scrollbar-highlight-color, scrollbar-shadow-color, scrollbar-darkshadow-color, scrollbar-3dlight-color
* scrollbar-track-color: #F5F8FA;
* scrollbar-arrow-color: #292f33;
==== Webflow Designer ====
* https://github.com/w3c/csswg-drafts/issues/1969
** need direct link(s) to screenshots

=== Sites blocking browsers ===
Some sites have designs that depend on scrollbar styling (specifically colors) so much that they block browsers that do not have such a feature:
* https://webcompat.com/issues/8030

=== Web App small scrolling areas ===
* Google uses scrollbar width modification in Gmail and Google Docs portions, typically in narrower areas where a smaller scrollbar helps to show more content.

=== Subtler cleaner web app UI ===
* Tab Atkins's personal blog authoring web UI has a much narrower than default scrollbar to help reduce distraction and visual noise while writing a blog post.

=== Browser UI ===
Some browser(s) build UI using web platform features, sometimes adding internal only extensions. Ideally the a web platform features can be re-used, however if a new feature is needed for such UI, it does not mean it should also be added to features exposed to the web. Such internal-only extensions can be used as prototypes for experience.

==== Firefox Devtools Dark Theme ====
Background (with screenshots): https://github.com/devtools-html/rfcs/issues/27

Note in particular the screenshots of the "Dark" theme:
* https://github.com/devtools-html/rfcs/issues/27#issuecomment-343139227
* Demo of "native OS" scrollbars looking bad on a dark theme: https://github.com/devtools-html/rfcs/issues/27#issuecomment-343228379

== Background ==
Windows IE 5.5 introduced scrollbar coloring properties in 2000, e.g.: https://web.archive.org/web/20000421151339/https://msdn.microsoft.com/workshop/author/dhtml/reference/properties/scrollbararrowcolor.asp (etc. replace URL last segment with other property names below without dashes or perhaps later date like https://web.archive.org/web/20001204025800/https://msdn.microsoft.com/workshop/author/dhtml/reference/properties/scrollbar3dlightcolor.asp)

CSS properties:
* scrollbar-3dlight-color (IE5.5-IE8) https://msdn.microsoft.com/en-us/library/ff520895(v=vs.85).aspx
** -ms-scrollbar-3dlight-color https://msdn.microsoft.com/en-us/library/ms531153(v=vs.85).aspx
* scrollbar-arrow-color (IE5.5-IE8) https://msdn.microsoft.com/en-us/library/ff520791(v=vs.85).aspx
** -ms-scrollbar-arrow-color (IE9+)
* scrollbar-base-color (IE5.5-IE8) https://msdn.microsoft.com/en-us/library/ff520948(v=vs.85).aspx
** -ms-scrollbar-base-color (IE9+)
* scrollbar-darkshadow-color (IE5.5-IE8) https://msdn.microsoft.com/en-us/library/ff520847(v=vs.85).aspx
** -ms-scrollbar-darkshadow-color (IE9+) https://msdn.microsoft.com/en-us/library/ms531156(v=vs.85).aspx
* scrollbar-face-color (IE5.5-IE8) https://msdn.microsoft.com/en-us/library/ff520854(v=vs.85).aspx
** -ms-scrollbar-face-color
* scrollbar-highlight-color (IE5.5-IE8) https://msdn.microsoft.com/en-us/library/ff521044(v=vs.85).aspx
** -ms-scrollbar-highlight-color
* scrollbar-track-color (IE5.5-IE8) https://msdn.microsoft.com/en-us/library/ff520872(v=vs.85).aspx
** -ms-scrollbar-track-color
* scrollbar-shadow-color (IE5.5-IE8) https://msdn.microsoft.com/en-us/library/ff521073(v=vs.85).aspx
** -ms-scrollbar-shadow-color (IE9+) https://msdn.microsoft.com/en-us/library/ms531159(v=vs.85).aspx

== Why not pseudos ==
Why not pseudo-elements?

Scrollbars are more like text-decoration, borders, outlines than they are things like ::before/::after, or ::first-letter or ::first-line.

Just as we don't have separate pseudo-elements for ::text-underline ::text-overline ::text-strike-through, or different border or outline sides, it doesn't make sense to have separate pseudos for scrollbars or scrollbar parts!

In addition, as described in [https://github.com/w3c/csswg-drafts/issues/107#issuecomment-299685473 CSSWG issue #107]:

[Webkit pseudo-elements for scrollbars], a feature mistakenly exposed to the web, should not need to be implemented everywhere for interop.

The scrollbar pseudo-elements as a set are not a good idea:
* OSs continuously evolve their scrollbar designs to provide better user experience, beyond the ability of any set of pseudo-elements to accurately model this over time.
* MacOS and Ubuntu, both have quite different scrollbar structure than that on Windows. Having something like the scrollbar pseudo-elements specified may make it harder for browsers to have decent behavior on different platforms.
* Different OSs having different scrollbar structure also means testing interop is harder, because you would need to take not only engines but also platforms into account.
** It is already not fully interop among platforms for Blink. ::-webkit-scrollbar-button doesn't have any effect on MacOS while it works on Windows.

== Web dev sites ==
Sites teaching how to use scrollbar styling
* http://www.spectrum-research.com/V2/projects_scrollbar_generator.asp
* scrollbar colors + webkit pseudos: https://stackoverflow.com/questions/9251354/css-customized-scroll-bar-in-div
* https://webdesign.tutsplus.com/articles/quick-tip-styling-scrollbars-to-match-your-ui-design--webdesign-9430

How to avoid using them:
* https://www.w3.org/Style/Examples/007/scrollbars.en.html

WebKit pseudos-specific:
* http://caniuse.com/css-scrollbar
* https://webkit.org/blog/363/styling-scrollbars/

== See Also ==
* [[CSSWG]]
* [[CSS]]