Skip to content

Commit 27987e6

Browse files
frivoalfrivoal
committed
[css-overflow] Move scrollbar-gutter from level 4 to level 3
As per https://logs.csswg.org/irc.w3.org/css/2021-08-04/#e1425617
1 parent 421f40a commit 27987e6

File tree

2 files changed

+168
-168
lines changed

2 files changed

+168
-168
lines changed

‎css-overflow-3/Overview.bs

Lines changed: 168 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -729,6 +729,173 @@ Smooth Scrolling: The 'scroll-behavior' Property</h3>
729729

730730
User agents may ignore this property. <!--fingerprint-->
731731

732+
<h2 id="scrollbar-gutter-property">
733+
Reserving space for the scrollbar: the 'scrollbar-gutter' property</h2>
734+
735+
The space between the inner border edge and the outer padding edge
736+
which user agents may reserve to display the scrollbar
737+
is called the <dfn>scrollbar gutter</dfn>.
738+
739+
The 'scrollbar-gutter' property gives control to the author
740+
over the presence of <a>scrollbar gutters</a>
741+
separately from the ability to control the presence of scrollbars
742+
provided by the 'overflow' property.
743+
744+
<pre class="propdef">
745+
Name: scrollbar-gutter
746+
Value: auto | stable && both-edges?
747+
Initial: auto
748+
Applies to: [=scroll containers=]
749+
Inherited: no
750+
Computed value: specified keyword(s)
751+
Animation type: discrete
752+
</pre>
753+
754+
This property affects the presence of <a>scrollbar gutters</a>
755+
placed at the <a>inline start</a> edge or <a>inline end</a> edge of the box.
756+
757+
The presence of a <a>scrollbar gutter</a>
758+
at the <a>block start</a> edge and <a>block end</a> edge of the box
759+
cannot be controlled in this level,
760+
and is determined the same way as the presence of <a>scrollbar gutters</a>
761+
placed at the <a>inline start</a> edge or <a>inline end</a> edge of the box
762+
when 'scrollbar-gutter' is ''scrollbar-gutter/auto''.
763+
764+
Scrollbars which by default are placed over the content box
765+
and do not cause <a>scrollbar gutters</a> to be created
766+
are called <dfn>overlay scrollbars</dfn>.
767+
Such scrollbars are usually partially transparent, revealing the content behind them if any.
768+
Their appearance and size may vary
769+
based on whether and how the user is interacting with them.
770+
771+
Scrollbars which are always placed in a <a>scrollbar gutter</a>,
772+
consuming space when present,
773+
are called <dfn>classic scrollbars</dfn>.
774+
Such scrollbars are usually opaque.
775+
776+
Whether <a>classic scrollbars</a> or <a>overlay scrollbars</a> are used,
777+
the appearance and size of the scrollbar,
778+
and whether scrollbars appear on the start or end edge of the box,
779+
is UA defined.
780+
781+
Note: Which side a scrollbar appears on may depend on
782+
operating system conventions,
783+
[=bidirectionality=],
784+
or other ergonomic considerations.
785+
786+
In the case of <a>classic scrollbars</a>,
787+
the width of the <a>scrollbar gutter</a>,
788+
if present (see below),
789+
is the same as the width of the scrollbar.
790+
In the case of <a>overlay scrollbars</a>,
791+
no <a>scrollbar gutter</a> is present.
792+
793+
Note: There are known use cases that could be addressed
794+
by enabling <a>scrollbar gutters</a>
795+
for <a>overlay scrollbars</a>,
796+
but no satisfactory design has been agreed to so far.
797+
This could be addressed by future extensions of this property.
798+
See [[css-overflow-4#sbg-ext]].
799+
800+
The values of this property have the following meaning:
801+
802+
<dl dfn-for="scrollbar-gutter" dfn-type=value>
803+
<dt><dfn>auto</dfn>
804+
<dd><a>Classic scrollbars</a> consume space by creating a <a>scrollbar gutter</a>
805+
when 'overflow' is ''overflow/scroll'',
806+
or when 'overflow' is ''overflow/auto'' and the box is overflowing.
807+
<a>Overlay scrollbars</a> do not consume space.
808+
809+
<dt><dfn>stable</dfn>
810+
<dd>The <a>scrollbar gutter</a> is present
811+
for <a>classic scrollbars</a>
812+
when 'overflow' is ''overflow/hidden'', ''overflow/scroll'', or ''overflow/auto'',
813+
regardless of whether the box is actually overflowing.
814+
<a>Overlay scrollbars</a> do not consume space.
815+
816+
Note: This does not change whether the scrollbar itself is visible,
817+
only the presence of a gutter is affected.
818+
819+
<dt><dfn>both-edges</dfn>
820+
<dd>If a <a>scrollbar gutter</a> would be present
821+
on one of the inline start edge or the inline end edge of the box,
822+
another <a>scrollbar gutter</a> must be present on the opposite edge as well.
823+
</dl>
824+
825+
When the <a>scrollbar gutter</a> is present but the scrollbar is not,
826+
or the scrollbar is transparent or otherwise does not fully obscure the <a>scrollbar gutter</a>,
827+
the background of the <a>scrollbar gutter</a> must be painted as an extension of the padding.
828+
829+
As for the 'overflow' property,
830+
when 'scrollbar-gutter' is set on the root element,
831+
the user agent must apply it to the viewport instead,
832+
and the used value on the root element itself is ''scrollbar-gutter: auto''.
833+
However, unlike the 'overflow' property,
834+
the user agent must not propagate 'scrollbar-gutter' from the HTML <{body}> element.
835+
836+
<div class=note>
837+
Note: The following table summarizes the interaction of 'overflow' and 'scrollbar-gutter'
838+
showing in which case space is reserved for a <a>classic scrollbar</a>'s <a>scrollbar gutter</a>.
839+
840+
<style>
841+
.data.complex tbody th:last-of-type {
842+
border-right: solid black 2px;
843+
}
844+
.data.complex tbody tr:nth-of-type(2n) td,
845+
.data.complex tbody tr:nth-of-type(2n) th:not([rowspan]) {
846+
background: rgba(127, 127, 127, 0.25);
847+
}
848+
</style>
849+
850+
<table class="data complex">
851+
<caption>
852+
Should a <a>classic scrollbar</a>'s <a>scrollbar gutter</a> be present?</caption>
853+
<thead>
854+
<tr>
855+
<th>'overflow'
856+
<th>'scrollbar-gutter'
857+
<th>Overflowing
858+
<th>Not overflowing
859+
</thead>
860+
<tr>
861+
<th rowspan=2>''overflow/scroll''
862+
<th>''scrollbar-gutter/auto''
863+
<td>yes
864+
<td>yes
865+
<tr>
866+
<th>''scrollbar-gutter/stable''
867+
<td>yes
868+
<td>yes
869+
<tr>
870+
<th rowspan=2>''overflow/auto''
871+
<th>''scrollbar-gutter/auto''
872+
<td>yes
873+
<td>
874+
<tr>
875+
<th>''scrollbar-gutter/stable''
876+
<td>yes
877+
<td>yes
878+
<tr>
879+
<th rowspan=2>''overflow/hidden''
880+
<th>''scrollbar-gutter/auto''
881+
<td>
882+
<td>
883+
<tr>
884+
<th>''scrollbar-gutter/stable''
885+
<td>yes
886+
<td>yes
887+
<tr>
888+
<th rowspan=2>''overflow/visible'', ''overflow/clip''
889+
<th>''scrollbar-gutter/auto''
890+
<td>
891+
<td>
892+
<tr>
893+
<th>''scrollbar-gutter/stable''
894+
<td>
895+
<td>
896+
</table>
897+
</div>
898+
732899
<h2 id="auto-ellipsis">
733900
Automatic Ellipses</h2>
734901

@@ -1492,6 +1659,7 @@ Fragmentation of Overflow: the 'continue' property</h3>
14921659
Changes from the <a href="https://www.w3.org/TR/2020/WD-css-overflow-3-20200603/">2020-06-03 Working Draft</a></h3>
14931660

14941661
* Moved the 'scroll-behavior' property from [[CSSOM-VIEW]] to this specification.
1662+
* Adopt the 'scrollbar-gutter' property, previously defined in [[CSS-OVERFLOW-4]].
14951663
<!-- This list is not complete -->
14961664

14971665
<h3 id="changes-since-2018-07-31">

‎css-overflow-4/Overview.bs

Lines changed: 0 additions & 168 deletions
Original file line numberDiff line numberDiff line change
@@ -219,173 +219,6 @@ Value Definitions</h3>
219219
Issue: copy level 3 content when final
220220

221221

222-
<h2 id="scrollbar-gutter-property">
223-
Reserving space for the scrollbar: the 'scrollbar-gutter' property</h2>
224-
225-
The space between the inner border edge and the outer padding edge
226-
which user agents may reserve to display the scrollbar
227-
is called the <dfn>scrollbar gutter</dfn>.
228-
229-
The 'scrollbar-gutter' property gives control to the author
230-
over the presence of <a>scrollbar gutters</a>
231-
separately from the ability to control the presence of scrollbars
232-
provided by the 'overflow' property.
233-
234-
<pre class="propdef">
235-
Name: scrollbar-gutter
236-
Value: auto | stable && both-edges?
237-
Initial: auto
238-
Applies to: [=scroll containers=]
239-
Inherited: no
240-
Computed value: specified keyword(s)
241-
Animation type: discrete
242-
</pre>
243-
244-
This property affects the presence of <a>scrollbar gutters</a>
245-
placed at the <a>inline start</a> edge or <a>inline end</a> edge of the box.
246-
247-
The presence of a <a>scrollbar gutter</a>
248-
at the <a>block start</a> edge and <a>block end</a> edge of the box
249-
cannot be controlled in this level,
250-
and is determined the same way as the presence of <a>scrollbar gutters</a>
251-
placed at the <a>inline start</a> edge or <a>inline end</a> edge of the box
252-
when 'scrollbar-gutter' is ''scrollbar-gutter/auto''.
253-
254-
Scrollbars which by default are placed over the content box
255-
and do not cause <a>scrollbar gutters</a> to be created
256-
are called <dfn>overlay scrollbars</dfn>.
257-
Such scrollbars are usually partially transparent, revealing the content behind them if any.
258-
Their appearance and size may vary
259-
based on whether and how the user is interacting with them.
260-
261-
Scrollbars which are always placed in a <a>scrollbar gutter</a>,
262-
consuming space when present,
263-
are called <dfn>classic scrollbars</dfn>.
264-
Such scrollbars are usually opaque.
265-
266-
Whether <a>classic scrollbars</a> or <a>overlay scrollbars</a> are used,
267-
the appearance and size of the scrollbar,
268-
and whether scrollbars appear on the start or end edge of the box,
269-
is UA defined.
270-
271-
Note: Which side a scrollbar appears on may depend on
272-
operating system conventions,
273-
[=bidirectionality=],
274-
or other ergonomic considerations.
275-
276-
In the case of <a>classic scrollbars</a>,
277-
the width of the <a>scrollbar gutter</a>,
278-
if present (see below),
279-
is the same as the width of the scrollbar.
280-
In the case of <a>overlay scrollbars</a>,
281-
no <a>scrollbar gutter</a> is present.
282-
283-
Note: There are known use cases that could be addressed
284-
by enabling <a>scrollbar gutters</a>
285-
for <a>overlay scrollbars</a>,
286-
but no satisfactory design has been agreed to so far.
287-
This could be addressed by future extensions of this property.
288-
See [[#sbg-ext]].
289-
290-
The values of this property have the following meaning:
291-
292-
<dl dfn-for="scrollbar-gutter" dfn-type=value>
293-
<dt><dfn>auto</dfn>
294-
<dd><a>Classic scrollbars</a> consume space by creating a <a>scrollbar gutter</a>
295-
when 'overflow' is ''overflow/scroll'',
296-
or when 'overflow' is ''overflow/auto'' and the box is overflowing.
297-
<a>Overlay scrollbars</a> do not consume space.
298-
299-
<dt><dfn>stable</dfn>
300-
<dd>The <a>scrollbar gutter</a> is present
301-
for <a>classic scrollbars</a>
302-
when 'overflow' is ''overflow/hidden'', ''overflow/scroll'', or ''overflow/auto'',
303-
regardless of whether the box is actually overflowing.
304-
<a>Overlay scrollbars</a> do not consume space.
305-
306-
Note: This does not change whether the scrollbar itself is visible,
307-
only the presence of a gutter is affected.
308-
309-
<dt><dfn>both-edges</dfn>
310-
<dd>If a <a>scrollbar gutter</a> would be present
311-
on one of the inline start edge or the inline end edge of the box,
312-
another <a>scrollbar gutter</a> must be present on the opposite edge as well.
313-
</dl>
314-
315-
When the <a>scrollbar gutter</a> is present but the scrollbar is not,
316-
or the scrollbar is transparent or otherwise does not fully obscure the <a>scrollbar gutter</a>,
317-
the background of the <a>scrollbar gutter</a> must be painted as an extension of the padding.
318-
319-
As for the 'overflow' property,
320-
when 'scrollbar-gutter' is set on the root element,
321-
the user agent must apply it to the viewport instead,
322-
and the used value on the root element itself is ''scrollbar-gutter: auto''.
323-
However, unlike the 'overflow' property,
324-
the user agent must not propagate 'scrollbar-gutter' from the HTML <{body}> element.
325-
326-
<div class=note>
327-
Note: The following table summarizes the interaction of 'overflow' and 'scrollbar-gutter'
328-
showing in which case space is reserved for a <a>classic scrollbar</a>'s <a>scrollbar gutter</a>.
329-
330-
<style>
331-
.data.complex tbody th:last-of-type {
332-
border-right: solid black 2px;
333-
}
334-
.data.complex tbody tr:nth-of-type(2n) td,
335-
.data.complex tbody tr:nth-of-type(2n) th:not([rowspan]) {
336-
background: rgba(127, 127, 127, 0.25);
337-
}
338-
</style>
339-
340-
<table class="data complex">
341-
<caption>
342-
Should a <a>classic scrollbar</a>'s <a>scrollbar gutter</a> be present?</caption>
343-
<thead>
344-
<tr>
345-
<th>'overflow'
346-
<th>'scrollbar-gutter'
347-
<th>Overflowing
348-
<th>Not overflowing
349-
</thead>
350-
<tr>
351-
<th rowspan=2>''overflow/scroll''
352-
<th>''scrollbar-gutter/auto''
353-
<td>yes
354-
<td>yes
355-
<tr>
356-
<th>''scrollbar-gutter/stable''
357-
<td>yes
358-
<td>yes
359-
<tr>
360-
<th rowspan=2>''overflow/auto''
361-
<th>''scrollbar-gutter/auto''
362-
<td>yes
363-
<td>
364-
<tr>
365-
<th>''scrollbar-gutter/stable''
366-
<td>yes
367-
<td>yes
368-
<tr>
369-
<th rowspan=2>''overflow/hidden''
370-
<th>''scrollbar-gutter/auto''
371-
<td>
372-
<td>
373-
<tr>
374-
<th>''scrollbar-gutter/stable''
375-
<td>yes
376-
<td>yes
377-
<tr>
378-
<th rowspan=2>''overflow/visible'', ''overflow/clip''
379-
<th>''scrollbar-gutter/auto''
380-
<td>
381-
<td>
382-
<tr>
383-
<th>''scrollbar-gutter/stable''
384-
<td>
385-
<td>
386-
</table>
387-
</div>
388-
389222
<h2 id="text-overflow" caniuse="text-overflow">Overflow Ellipsis: the 'text-overflow' property</h2>
390223

391224
<pre class="propdef">
@@ -1889,7 +1722,6 @@ The following changes were made to this specification since the
18891722

18901723
<ul>
18911724
<li>The Fragmentation of overflow, Paginated overflow, and Fragment overflow sections and subsections have been removed form Level 3 and moved to Level 4.
1892-
<li>The 'scrollbar-gutter' property has been added.
18931725
</ul>
18941726

18951727
<h2 class=no-num id="acknowledgments">

0 commit comments

Comments
 (0)