Skip to content

Commit b6e5e1c

Browse files
committed
[css-scrollbars] Add notes and advisements to scrollbar-width
This clarifies the purpose of the property, as well as how users are ultimately in charge of this UI component. See #6351
1 parent 696cabb commit b6e5e1c

File tree

1 file changed

+36
-1
lines changed

1 file changed

+36
-1
lines changed

css-scrollbars-1/Overview.bs

+36-1
Original file line numberDiff line numberDiff line change
@@ -192,9 +192,32 @@ Percentages: n/a
192192
This property allows the author to specify
193193
the desired thickness of an element’s scrollbars.
194194

195+
<div class=advisement>
196+
The primary purpose of this property is not
197+
to allow authors to chose a particular scrollbar aesthetic for their pages,
198+
but to let them indicate for certain small or cramped elements of their pages
199+
that a smaller scrollbar would be desirable.
200+
201+
Scrollbars are a UI mechanism essential to interact with the page.
202+
Operating systems tend to want consistency in such controls to improve usability through familiarity,
203+
and users with specific preferences or needs can adjust
204+
the appearance of various UI components, including scrollbars,
205+
through OS or UA settings.
206+
207+
While using this property in support of specific UX goals is appropriate,
208+
authors should otherwise refrain from overriding such user preferences.
209+
</div>
210+
195211
<dl dfn-type="value" dfn-for=scrollbar-width>
196212
<dt><dfn>auto</dfn></dt>
197-
<dd>Implementations must use the default platform scrollbar width.
213+
<dd>Implementations must use the default scrollbar width.
214+
215+
Note: On most systems, this corresponds to the traditional somewhat wide scrollbar.
216+
However, through OS or UA settings,
217+
users can have the ability to change what this default corresponds to,
218+
possibly making the default scrollbar
219+
wider or narrower than is typical.
220+
198221
</dd>
199222
<dt><dfn>thin</dfn></dt>
200223
<dd>Implementations should use thinner scrollbars than ''scrollbar-width/auto''.
@@ -204,6 +227,11 @@ The scrollbar should nonetheless remain wide enough to be usable.
204227
(Implementers may wish to consult
205228
<a href="https://www.w3.org/TR/WCAG21/#target-size">WCAG 2.1 SC 2.5.5 Target Size</a>. [[WCAG21]])
206229

230+
User agents may disregard this value and treat it as ''scrollbar-width/auto'',
231+
for instance when the user has indicated discomfort
232+
for thin scrollbars through some UA or OS setting.
233+
(User agents are encouraged to provide such a setting.)
234+
207235
Note: Some platforms only have a tiny scrollbar by default
208236
which cannot be reasonably made thinner.
209237
In such cases, this value will behave as ''scrollbar-width/auto''.
@@ -230,6 +258,13 @@ authors should use ''overflow: hidden'' instead of ''scrollbar-width: none''.
230258
</dd>
231259
</dl>
232260

261+
<div class=note>Note: Users who find the ''thin'' style of scrollbars unusable
262+
can include the following rule in their [=user style sheet=]:
263+
<pre><code class=lang-css>* { scrollbar-width: auto !important; }</code></pre>
264+
This will ensure that all scrollbars are sized as per OS and UA settings
265+
regardless of author styles.
266+
</div>
267+
233268
UAs must apply the 'scrollbar-width' value set on the root element to the viewport.
234269

235270
Note: Unlike the 'overflow' property (and its longhands),

0 commit comments

Comments
 (0)