Css-scrollbars
This article is a stub. You can help the W3C wiki by expanding it.
CSS Scrollbars 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:
- 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:
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 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:
WebKit pseudos-specific: