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:

• https://www.w3.org/TR/css-scrollbars-1/

Editor's Draft

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

TR

https://www.w3.org/TR/css-scrollbars-1/

Repo

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://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

• 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):

  • Background

    Windows IE 5.5 introduced scrollbar coloring properties in 2000, e.g.: 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) 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:

      • https://www.w3.org/Style/Examples/007/scrollbars.en.html

      WebKit pseudos-specific:

      • http://caniuse.com/css-scrollbar
      • See Also
        • CSSWG
        • CSS