@@ -3,8 +3,12 @@ Title: CSS Scrollbars Styling Module Level 1
3
3
Group : csswg
4
4
Shortname : css-scrollbars
5
5
Level : 1
6
- Status : ED
6
+ Status : CR
7
+ Date : 2021-12-07
8
+ Deadline : 2022-02-07
9
+ Prepare for TR : yes
7
10
Work Status : Revising
11
+ Implementation Report : https://wpt.fyi/results/css/css-scrollbars?label=experimental&label=master&aligned
8
12
ED : https://drafts.csswg.org/css-scrollbars/
9
13
TR : https://www.w3.org/TR/css-scrollbars-1/
10
14
Previous version : https://www.w3.org/TR/2021/WD-css-scrollbars-1-20211202/
@@ -19,7 +23,6 @@ Editor: Florian Rivoal, Invited Expert, https://florian.rivoal.net/, w3cid 43241
19
23
Abstract : This CSS module defines properties
20
24
to influence the visual styling of scrollbars,
21
25
introducing controls for their color and width.
22
- Link Defaults : css-color-3 (property) color
23
26
</pre>
24
27
25
28
<h2 id="intro">
@@ -103,7 +106,7 @@ This property allows the author to set colors of an element's scrollbars.
103
106
104
107
UAs must apply the scrollbar-color value set on the root element to the viewport.
105
108
106
- Note: Unlike 'overflow' (and overflow-*) properties,
109
+ Note: Unlike 'overflow' (and overflow-*) properties,
107
110
scrollbar-color value set on the HTML body element are not propagated to the viewport.
108
111
109
112
<dl dfn-type="value" dfn-for="scrollbar-color">
@@ -139,10 +142,10 @@ or to a lack of control given by the native toolkit.
139
142
The provision above allows the UA to replace them with differently-constructed scrollbars,
140
143
which it does know how to color.
141
144
142
- (Note: add diagram showing the different named pieces - something like
145
+ (Note: add diagram showing the different named pieces - something like
143
146
<a href="http://www.howtocreate.co.uk/tutorials/scrlbar.html">http://www.howtocreate.co.uk/tutorials/scrlbar.html</a> )
144
147
145
- (Note: add example of an overflow element with colorized scrollbars to match page styling,
148
+ (Note: add example of an overflow element with colorized scrollbars to match page styling,
146
149
PNG of the same in a browser that supports it currently)
147
150
148
151
Implementations may ignore any of the colors
@@ -151,36 +154,36 @@ if the corresponding part do not exist on the underlying platform.
151
154
When using 'scrollbar-color' property with specific color values,
152
155
authors should ensure the specified colors have enough contrast between them.
153
156
For keyword values, UAs should ensure the colors they use have enough contrast.
154
- See
155
- <a href="https://www.w3.org/TR/WCAG21/#non-text-contrast">WCAG 2.1 SC 1.4.11 Non-text Contrast</a>
156
- [[WCAG21]] .
157
- UAs may ignore these contrast requirements based on explicit user preferences
158
- (for example, when users choose a configuration option/setting that
157
+ See
158
+ <a href="https://www.w3.org/TR/WCAG21/#non-text-contrast">WCAG 2.1 SC 1.4.11 Non-text Contrast</a>
159
+ [[WCAG21]] .
160
+ UAs may ignore these contrast requirements based on explicit user preferences
161
+ (for example, when users choose a configuration option/setting that
159
162
always ensures a particular scrollbar color / use of system default scrollbars).
160
163
161
- Note: when a user interacts with a scrollbar (e.g. hovering or activating),
164
+ Note: when a user interacts with a scrollbar (e.g. hovering or activating),
162
165
implementations may alter which scrollbar colors apply to which scrollbar parts.
163
166
164
- Note: IE uses named System Colors as defaults for each of the scrollbar color properties.
167
+ Note: IE uses named System Colors as defaults for each of the scrollbar color properties.
165
168
See related <a href="https://github.com/w3c/csswg-drafts/issues/1956">Issue 1956</a> .
166
169
167
170
<div class="example">
168
- <p> The following example
171
+ <p> The following example
169
172
(derived from
170
- <a href="https://www.w3.org/Style/Examples/007/scrollbars.en.html">https://www.w3.org/Style/Examples/007/scrollbars.en.html</a> )
173
+ <a href="https://www.w3.org/Style/Examples/007/scrollbars.en.html">https://www.w3.org/Style/Examples/007/scrollbars.en.html</a> )
171
174
resets scrollbar colors in IE.</p>
172
175
173
176
<pre><code class="css">
174
- <!-- -->html {
177
+ <!-- -->html {
175
178
<!-- --> scrollbar-color: ThreeDFace Scrollbar;
176
179
<!-- -->}</code></pre>
177
180
</div>
178
181
179
182
180
183
<h2 id="scrollbar-width">Scrollbar Thickness: the 'scrollbar-width' property</h2>
181
184
182
- <pre class="propdef">
183
- Name : scrollbar-width
185
+ <pre class="propdef">
186
+ Name : scrollbar-width
184
187
Value : auto | thin | none
185
188
Initial : auto
186
189
Inherited : no
@@ -280,7 +283,7 @@ UAs must apply the 'scrollbar-width' value set on the root element to the viewpo
280
283
Note: Unlike the 'overflow' property (and its longhands),
281
284
a 'scrollbar-width' value set on the HTML <{body}> element is not propagated to the viewport.
282
285
283
- Note: This specification does not define the exact position or shape of the scrollbar,
286
+ Note: This specification does not define the exact position or shape of the scrollbar,
284
287
or any animation thereof, such as fading or sliding in/out of view.
285
288
286
289
<h2 class="no-num" id="acknowledgments">Appendix A. Acknowledgments</h2>
@@ -291,16 +294,22 @@ This appendix is <em>non-normative</em>.
291
294
Thanks to the use-cases, prototyping, implementation, and feedback from
292
295
<a class="h-card" href="https://xanthir.com/">Tab Atkins</a> and
293
296
<a class="h-card" href="https://www.upsuper.org/">Xidorn Quan</a> .
294
- Thanks to accessibility review and contributions
295
- (<a href="https://github.com/w3c/csswg-drafts/issues/3315">#3315</a> )
296
- from
297
+ Thanks to accessibility review and contributions
298
+ (<a href="https://github.com/w3c/csswg-drafts/issues/3315">#3315</a> )
299
+ from
297
300
<a class="h-card" href="https://www.splintered.co.uk">Patrick H. Lauke</a> .
298
301
</p>
299
302
300
303
<h2 class="no-num" id="changes">Appendix B. Changes</h2>
301
304
302
305
This appendix is <em> non-normative</em> .
303
306
307
+ <h3 class="no-num" id="changes-since-2021-12-02">
308
+ Changes since the <a href="https://www.w3.org/TR/css-scrollbars-1/">2021-12-02 Working Draft</a>
309
+ </h3>
310
+
311
+ * Boilerplate changes for CR
312
+
304
313
<h3 class="no-num" id="changes-since-2021-08-05">
305
314
Changes from the <a href="https://www.w3.org/TR/2021/WD-css-scrollbars-1-20210805/">2021-08-05 Working Draft</a></h3>
306
315
@@ -315,13 +324,13 @@ Changes from the <a href="https://www.w3.org/TR/2018/WD-css-scrollbars-1-2018092
315
324
removed <css> light</css> and <css> dark</css> values of 'scrollbar-color'
316
325
in favor of allowing the UA to tune ''scrollbar-color/auto''
317
326
in accordance with 'color-scheme' or other contextual information.
318
- <li> <a href="https://github.com/w3c/csswg-drafts/issues/3237">#3237</a> :
327
+ <li> <a href="https://github.com/w3c/csswg-drafts/issues/3237">#3237</a> :
319
328
scrollbar-color computed value changed to: specified keyword or two computed colors
320
329
</li>
321
- <li> <a href="https://github.com/w3c/csswg-drafts/issues/4693">#4693</a> :
330
+ <li> <a href="https://github.com/w3c/csswg-drafts/issues/4693">#4693</a> :
322
331
Clarified scope: styling scrollbar controls themselves, no layout or scrollability.
323
332
</li>
324
- <li> <a href="https://github.com/w3c/csswg-drafts/issues/3315">#3315</a> :
333
+ <li> <a href="https://github.com/w3c/csswg-drafts/issues/3315">#3315</a> :
325
334
More and updated accessibility considerations for scrollbar-color and scrollbar-width.
326
335
</ul>
327
336
@@ -384,8 +393,8 @@ Self-Review Questionnaire: Security and Privacy: Questions to Consider</a>
384
393
</li>
385
394
386
395
<li> Does this specification allow an origin some measure of control over a user agent’s native UI?
387
- <p> Yes. The 'scrollbar-*' properties enable the page to change the color and width of the scrollbar
388
- of the user agent’s native UI, e.g. scrollbars on the page’s window, on framed content embedded in the page,
396
+ <p> Yes. The 'scrollbar-*' properties enable the page to change the color and width of the scrollbar
397
+ of the user agent’s native UI, e.g. scrollbars on the page’s window, on framed content embedded in the page,
389
398
or on overflowing elements with scrollbars in the page.</p>
390
399
</li>
391
400
0 commit comments