Skip to content

Commit

Permalink
reduce to two properties, -face-color -track-color
Browse files Browse the repository at this point in the history
Per #1960 (comment) implementation/prototyping experience, reduce number of properties to two: scrollbar-face-color and scrollbar-track-color. Resolves issue #1960
  • Loading branch information
tantek authored Jul 4, 2018
1 parent 22343bc commit 0fb88c2
Showing 1 changed file with 8 additions and 32 deletions.
40 changes: 8 additions & 32 deletions css-scrollbars-1/Overview.bs
Original file line number Diff line number Diff line change
Expand Up @@ -56,14 +56,8 @@ Values</h3>
Scrollbar Color Properties</h2>

<pre class="propdef">
Name: scrollbar-3dlight-color,
scrollbar-arrow-color,
scrollbar-base-color,
scrollbar-darkshadow-color,
scrollbar-face-color,
scrollbar-highlight-color,
scrollbar-track-color,
scrollbar-shadow-color
Name: scrollbar-face-color,
scrollbar-track-color
Value: auto | <<color>>
Initial: auto
Inherited: yes
Expand All @@ -76,18 +70,12 @@ Media: visual

These properties allow the author to set colors for various aspects of an element’s scrollbars.

Note: Per <a href="https://github.com/w3c/csswg-drafts/issues/1960">Issue 1960</a>,
the list of scrollbar-*-color properties is likely to be reduced to 2-3 (ideally 2),
with current candidates being scrollbar-base-color, scrollbar-face-color, scrollbar-track-color,
per <a href="https://www.w3.org/wiki/Css-scrollbars#Use-cases">research so far</a>,
and preferably only two of those. Additional input, data, suggestions welcome at those links!

UAs must apply the scrollbar-* values set on the root element to the viewport.

Note: Unlike 'overflow' (and overflow-*) properties,
scrollbar-* values set on the HTML body element are not propagated to viewport.

<dl dfn-type="value" dfn-for="scrollbar-base-color">
<dl dfn-type="value" dfn-for="scrollbar-face-color">
<dt><dfn>auto</dfn>
<dd>default platform rendering for that portion of the scrollbar, in the absence of any other
related scrollbar color properties. See details below for which scrollbar color are related to which.
Expand All @@ -97,15 +85,8 @@ related scrollbar color properties. See details below for which scrollbar color

Details:

If scrollbar-track-color computes to auto, and scrollbar-face-color and scrollbar-highlight-color are not auto,
they are combined (e.g. dithered) to color the scrollbar track.
If just one of scrollbar-face-color and scrollbar-highlight-color is not auto, it is used to color the scrollbar track.

If scrollbar-face-color computes to auto and scrollbar-base-color is not auto,
then use its value for scrollbar-face-color.

If scrollbar-3dlight-color computes to auto and scrollbar-base-color is not auto,
then use its value for scrollbar-3dlight-color.
If scrollbar-track-color computes to auto, and scrollbar-face-color is not auto,
it is used to color the scrollbar track.

If an element has both horizontal and vertical scrollbars, and the scrollbar-face-color is not auto,
use it for the area in the corner between the two scrollbars.
Expand All @@ -122,26 +103,21 @@ PNG of the same in a browser that supports it currently)
Implementations may ignore any scrollbar color properties for scrollbar parts that do not exist
on the underlying platform.

Note: when a user interacts with a scrollbar (e.g. arrow buttons or scroll thumb if any),
implementations may alter which scrollbar colors apply to which scrollbar parts (e.g. replace 3dlight and darkshadow colors with their shadow color, and highlight and shadow colors with their face color.
Note: when a user interacts with a scrollbar (e.g. hovering or activating),
implementations may alter which scrollbar colors apply to which scrollbar parts.

Note: IE uses named System Colors as defaults for each of the scrollbar color properties.
See related <a href="https://github.com/w3c/csswg-drafts/issues/1956">Issue 1956</a>.

<div class="example">
<p>The following example
(as noted in
(derived from
<a href="https://www.w3.org/Style/Examples/007/scrollbars.en.html">https://www.w3.org/Style/Examples/007/scrollbars.en.html</a>)
resets scrollbar colors in IE.</p>

<pre><code class="css">
<!-- -->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;
<!-- -->}</code></pre>
</div>

0 comments on commit 0fb88c2

Please sign in to comment.