Css-scrollbars

From W3C Wiki
Jump to: navigation, search

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.

Editor's Draft
https://drafts.csswg.org/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

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:

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:

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:

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

How to avoid using them:

WebKit pseudos-specific:

See Also