1
1
<pre class="metadata">
2
2
Title : CSS Overflow Module Level 5
3
- Status : ED
3
+ Status : FPWD
4
+ Prepare for TR : yes
4
5
Work Status : Revising
5
6
ED : https://drafts.csswg.org/css-overflow-5/
7
+ TR : https://www.w3.org/TR/css-overflow-5/
6
8
Shortname : css-overflow
7
9
Group : csswg
8
10
Level : 5
@@ -11,7 +13,9 @@ Editor: Elika J. Etemad / fantasai, Apple, http://fantasai.inkedblade.net/contac
11
13
Editor : Robert Flack, Google, flackr@google.com, w3cid 98451
12
14
Abstract : This module contains the features of CSS relating to scrollable overflow handling in visual media.
13
15
It builds on the <a href="https://www.w3.org/TR/css-overflow-4/">CSS Overflow Module Level 4</a>,
14
- adding an appendix containing an experimental exploration
16
+ adding the ability to generate and associate various scrolling controls
17
+ (markers to indicate scroll progress, buttons to trigger scrolling),
18
+ and adding an appendix containing an experimental exploration
15
19
of <a href="#fragmentation">redirecting overflow by fragmentation</a>.
16
20
</pre>
17
21
<pre class="link-defaults">
@@ -21,6 +25,9 @@ spec:css-pseudo-4; type:selector; text:::first-line
21
25
spec:css-writing-modes-4; type:dfn; text:start
22
26
spec:css-writing-modes-4; type:dfn; text:end
23
27
</pre>
28
+ <pre class=ignored-specs>
29
+ spec: css21
30
+ </pre>
24
31
<pre class="anchors">
25
32
url: https://www.w3.org/TR/CSS21/visudet.html#strut; type: dfn; text: strut;
26
33
</pre>
@@ -133,27 +140,30 @@ url: https://www.w3.org/TR/CSS21/visudet.html#strut; type: dfn; text: strut;
133
140
Introduction</h2>
134
141
135
142
This specification extends [[!CSS-OVERFLOW-4]] .
143
+ It is currently a diff specification,
144
+ defining only a few new features;
145
+ see [[CSS-OVERFLOW-4]] for the rest of the features related to overflow.
136
146
137
147
: [[#scroll-navigation|Scroll navigation controls]]
138
148
::
139
- This section defines stylable scroll navigation controls
140
- with defined user interactions and accessible labels,
141
- and pseudo-classes which automatically construct them.
149
+ This section defines the ability to associate [=scroll markers=]
150
+ with elements in a scroller
151
+ (or generate them automatically as ''::scroll-marker'' pseudo-elements,
152
+ with automatic user behavior and accessible labels),
153
+ which can be activated to scroll to the associated elements
154
+ and reflect the scroller's relative scroll progress
155
+ via the '':target-current'' pseudo-class.
156
+
157
+ It also defines ''::scroll-button()'' pseudo-elements,
158
+ which can be activated to cause their associated scroller
159
+ to scroll by a "page" in a given direction.
142
160
143
161
: [[#fragmentation|Redirection of Overflow]]
144
162
::
145
163
This section defines a highly experimental, exploratory new model
146
164
for handling overflow by redirecting it into newly-generated [=fragmentation containers=] .
147
165
148
166
149
- Note: At the time of writing, [[CSS-OVERFLOW-4]] is not completely finalized yet.
150
- To avoid accidental divergences and maintenance overhead,
151
- This specification is written as a delta specification over css-overflow Level 4.
152
- Once the level 4 specification is final,
153
- its content will be integrated into this specification,
154
- which will then replace it.
155
- Until then, this specification only contains additions and extensions to level 4.
156
-
157
167
<h2 id="overflow-concepts">
158
168
Overflow Concepts and Terminology</h2>
159
169
@@ -415,7 +425,7 @@ They exist after their [=originating element's=] ''::scroll-marker-group'' pseud
415
425
(when used with ''scroll-marker-group: before'' ).
416
426
417
427
Four distinct ''::scroll-button()'' pseudo-elements can exist on a [=scroll container=] ,
418
- each associated with a [=logical =] direction,
428
+ each associated with a [=flow-relative =] direction,
419
429
based on their [=originating element's=] [=writing mode=] :
420
430
in order, [=block-start=] , [=inline-start=] , [=block-end=] , and [=inline-end=] .
421
431
The ''::scroll-button()'' pseudo-elements are both focusable and activatable by default,
@@ -447,7 +457,7 @@ The possible <dfn><<scroll-button-direction>></dfn> values are:
447
457
: <dfn>down</dfn>
448
458
: <dfn>left</dfn>
449
459
: <dfn>right</dfn>
450
- :: Selects the ''::scroll-button()' corresponding to the given physical direction.
460
+ :: Selects the ''::scroll-button()'' corresponding to the given physical direction.
451
461
452
462
: <dfn>block-start</dfn>
453
463
: <dfn>block-end</dfn>
@@ -459,7 +469,7 @@ The possible <dfn><<scroll-button-direction>></dfn> values are:
459
469
::
460
470
Selects either the [=block-start=] or [=inline-start=] ''::scroll-button()'' ,
461
471
whichever's axis has more "scrollable pages" in the [=originating element=] :
462
- the [=originating element's=] [=scrollable overflow height=]
472
+ the [=originating element's=] [=scrollable overflow area|scrollable overflow height=]
463
473
divided by its [=scrollport=] height,
464
474
or the same but for widths.
465
475
0 commit comments