Skip to content

[css-scrollbar] Merge scrollbar color properties into one #3065

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
tantek merged 1 commit into from
Sep 15, 2018
Merged

[css-scrollbar] Merge scrollbar color properties into one #3065

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
47 changes: 22 additions & 25 deletions css-scrollbars-1/Overview.bs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,58 +50,56 @@ Values</h3>
also accept the <a>CSS-wide keywords</a> keywords as their property value.
For readability they have not been repeated explicitly.

<h2 id="scrollbar-color-properties">
Scrollbar Colors: the 'scrollbar-face-color' and 'scrollbar-track-color' properties</h2>
<h2 id="scrollbar-color">Scrollbar Colors: the 'scrollbar-color' property</h2>

<pre class="propdef">
Name: scrollbar-face-color,
scrollbar-track-color
Value: auto | <<color>>
Name: scrollbar-color
Value: auto | <<color>>{2}
Initial: auto
Inherited: yes
Computed value: the computed color or the keyword auto
Computed value: two computed colors or the keyword auto
Animation type: <a href="https://www.w3.org/TR/css3-transitions/#animtype-color">color</a>
Applies to: boxes to which 'overflow' applies
Percentages: n/a
</pre>

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

UAs must apply the scrollbar-* values set on the root element to the viewport.
UAs must apply the scrollbar-color value 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 the viewport.
scrollbar-color value set on the HTML body element are not propagated to the viewport.

<dl dfn-type="value" dfn-for="scrollbar-face-color">
<dl dfn-type="value" dfn-for="scrollbar-color">
<dt><dfn>auto</dfn></dt>
<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.
</dd>
<dd>default platform rendering for the scrollbar.</dd>
<dt><dfn><<color>></dfn></dt>
<dd>apply the color to that portion of the scrollbar, and potentially other portions of the scrollbar.
<dd>
apply the first color to the thumb of the scrollbar,
and the second color to the track of the scrollbar.
</dd>
</dl>

Details:

If scrollbar-track-color computes to auto, and scrollbar-face-color is not auto,
it is used to color the scrollbar track.
Track refers to the background of the scrollbar,
which is generally fixed regardless of the scrolling position.

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.
Thumb refers to the moving part of the scrollbar,
which usually floats on top of the track.

If the color of any part of the scrollbar is specified,
implementations may render a simpler scrollbar than the default platform UI rendering, and color it accordingly.
If this property computes to value other than ''auto'',
implementations may render a simpler scrollbar than the default platform UI rendering,
and color it accordingly.

(Note: add diagram showing the different named pieces - something like
<a href="http://www.howtocreate.co.uk/tutorials/scrlbar.html">http://www.howtocreate.co.uk/tutorials/scrlbar.html</a>)

(Note: add example of an overflow element with colorized scrollbars to match page styling,
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.
Implementations may ignore any of the colors
if the corresponding part do not exist on the underlying platform.

Note: when a user interacts with a scrollbar (e.g. hovering or activating),
implementations may alter which scrollbar colors apply to which scrollbar parts.
Expand All @@ -117,8 +115,7 @@ See related <a href="https://github.com/w3c/csswg-drafts/issues/1956">Issue 1956

<pre><code class="css">
<!-- -->html {
<!-- --> scrollbar-face-color: ThreeDFace;
<!-- --> scrollbar-track-color: Scrollbar;
<!-- --> scrollbar-color: ThreeDFace Scrollbar;
<!-- -->}</code></pre>
</div>

Expand Down