Skip to content

Commit 4307fe6

Browse files
committed
[css-scrollbars] Scrollbars don't have to be flat
Add note and example highlighting that there can be variation in the design of scrollbars, including, but not limited to flat designs. Related to w3c#9851
1 parent ea5821e commit 4307fe6

File tree

3 files changed

+36
-0
lines changed

3 files changed

+36
-0
lines changed

css-scrollbars-1/Overview.bs

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -217,6 +217,42 @@ Value Definitions</h3>
217217
The provision above allows the UA to replace them with differently-constructed scrollbars,
218218
which it does know how to color.
219219

220+
Note: User Agents are expected to use the color
221+
in the rendering of the scrollbar,
222+
but that does not imply they need to paid the entire thumb or track
223+
with a single solid featureless color.
224+
The specified color can be used as a tint for part of the component,
225+
lighter or darker shades of the color can be used for highlights, shadows, texture…
226+
227+
<div class=example id=non-flat>
228+
The following image represents a possible rendition of a scrollbar
229+
given the following css:
230+
<pre><code highlight=css>scrollbar-color: #8eb0dc #d2d4d6;</code></pre>
231+
This specific design is not only that single shade of blue over that single shade of gray:
232+
the [=thumb=] has a subtle vertical gradient
233+
going from a lighter shade at the top to a slightly darker shade at the bottom,
234+
darker notches in the middle,
235+
as well as a darker outline,
236+
all derived from the specified shade of blue;
237+
the light gray [=track=] has a darker outline.
238+
239+
<img src="images/non-flat-bar.png"
240+
alt="A horizontal scrollbar with a textured, shaded and outlined blue thumb,
241+
over a light gray track which is itself outlined,
242+
and flanked by two 'scroll left' and 'scroll right' buttons,
243+
as was commonly seen in scrollbar designs of the early 2000s">
244+
245+
Nevertheless, authors cannot assume that this will necessarily be the case,
246+
as on a different platform or a different user agent
247+
the rendering could be a solid color [=thumb=] over a solid color [=track=],
248+
as seen below.
249+
250+
<img src="images/flat-bar.png"
251+
alt="A horizontal scrollbar with a blue featureless rounded rectangle as a thumb
252+
over a featureless light gray track,
253+
as was commonly seen in scrollbar designs of the early 2020s">
254+
</div>
255+
220256
Issue: add diagram showing the different named pieces - something like
221257
<a href="http://www.howtocreate.co.uk/tutorials/scrlbar.html">http://www.howtocreate.co.uk/tutorials/scrlbar.html</a>
222258

4.54 KB
Loading
6.75 KB
Loading

0 commit comments

Comments
 (0)