Skip to content

Commit aaa8860

Browse files
fantasaifantasai
committed
[css-scroll-snap] Rework scroll-snap-align as an alignment. First cut, probably needs some work.
1 parent 3572ffd commit aaa8860

1 file changed

Lines changed: 247 additions & 13 deletions

File tree

‎css-scroll-snap/Overview.bs‎

Lines changed: 247 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -168,10 +168,6 @@ On the scroll container:
168168
<td>'scroll-snap-points-y'
169169
<td>'scroll-snap-points-y'
170170
<td>
171-
<tr>
172-
<td>n/a
173-
<td>''scroll-group-align: [ start | end | edges ]{1,2} | <<position>>#''
174-
<td>Low priority
175171
</table>
176172

177173
On the children:
@@ -185,9 +181,8 @@ On the children:
185181
<tbody>
186182
<tr>
187183
<td>''scroll-snap-coordinate: <<position>>#''
188-
<td>''scroll-snap-align: [ none | start | end | edges ]{1,2} | <<position>> | group''
189-
<td>High priority; simpler version adds a center keyword to the bracketed set instead of allowing the full <<position>># syntax inherited from 'scroll-snap-coordinate'.
190-
''group'' keyword is low-priority.
184+
<td>''scroll-snap-align: [ x | y | block | inline | xy ] [ none | start | end | edges | <<percentage>> ]{1,2}''
185+
<td>High priority
191186
<tr>
192187
<td>n/a
193188
<td>''scroll-snap-area: [ border-box | margin-box ] || <<length>>{1,4}''
@@ -317,7 +312,6 @@ Scroll Snapping Rules: the 'scroll-snap-type' property {#snap-type}
317312
Scroll Snapping Window: the 'scroll-snap-padding' property {#snap-padding}
318313
-----------------------
319314

320-
321315
<pre class="propdef">
322316
Name: scroll-snap-padding
323317
Value: [ <<length>> | <<percentage>> ]{1,4}
@@ -358,6 +352,10 @@ Scroll Snapping Window: the 'scroll-snap-padding' property {#snap-padding}
358352
</pre>
359353
</div>
360354

355+
This property is a <a>shorthand property</a> that sets
356+
all of the <a href="#longhands"><css>scroll-snap-padding-*</css> longhands</a>
357+
in one declaration.
358+
361359
Coordinate-based Snapping {#snap-points}
362360
=========================
363361

@@ -429,27 +427,127 @@ Scroll Snapping Area: the 'scroll-snap-area' property {#the-scroll-snap-area}
429427
that is used for snapping this box to the viewport.
430428
<<length>> values give outsets (similar to 'margin' or 'border-image-outset').
431429

430+
This property is a <a>shorthand property</a> that sets
431+
all of the <a href="#longhands"><css>scroll-snap-area-*</css> longhands</a>
432+
in one declaration.
433+
432434
Scroll Snapping Alignment: the 'scroll-snap-align' property {#scroll-snap-align}
433435
--------------------------
434436

435437
<pre class="propdef">
436438
Name: scroll-snap-align
437-
Value: [ none | start-edge | end-edge | edges ]{1,2} | <<position>>#
439+
Value: [ x | y | block | inline ]? [ none | start | end | center | edges | <<percentage>> ]
440+
| point || xy? [ none | start | end | center | <<percentage>> ]{1,2}
438441
Initial: none
439442
Applies to: all elements
440443
Inherited: no
441-
Computed value: as specified, with lengths made absolute
444+
Percentages: refer to size of scroller's <a>snap target area</a> <em>minus</em> size of box's <a>snap area</a>
445+
Computed value: as specified
442446
Animatable: no
443447
Media: interactive
444448
</pre>
445449

446450
Specifies the element's <a>snap position</a> as an alignment of
447451
its <a>snap area</a> (as the <a>alignment subject</a>)
448452
within the viewport's <a>snap target area</a> (as the <a>alignment container</a>).
453+
The <a>scroll alignment values</a> can be specified per-axis,
454+
or as a simultaneous 2D alignment position,
455+
by using a <a>scroll axis keyword</a>.
456+
457+
<div class="example">
458+
The following example aligns the block-start edge of the box's <a>snap area</a>
459+
to the block-start edge of the scroller's <a>snap target area</a>:
460+
<pre>section { scroll-snap-align: start; }</pre>
461+
462+
The following example aligns the center of each city
463+
to the center of the scroller's <a>snap target area</a>,
464+
snapping only when the city is centered in both axes:
465+
<pre>city { scroll-snap-align: center point; }</pre>
466+
467+
The following example aligns the center of each photo
468+
to the center of the scroller's <a>snap target area</a>,
469+
snapping independently in each axis:
470+
<pre>img { scroll-snap-align: center; }</pre>
471+
</div>
472+
473+
The <dfn>scroll alignment values</dfn> are defined as follows:
449474

450-
The first value specifies alignment in the inline axis;
451-
the second value specifies alignment in the block axis.
452-
If one value is specified, it is duplicated.
475+
<dl dfn-for=scroll-snap-align dfn-type=value>
476+
<dt><dfn>none</dfn>
477+
<dd>
478+
This box does not define a <a>snap position</a> in the specified axis.
479+
480+
<dt><dfn>start</dfn>
481+
<dd>
482+
Start alignment of this box's <a>scroll snap area</a>
483+
within the scroller's <a>scroll snap target area</a>
484+
is a valid <a>snap position</a>.
485+
Equivalent to ''0%''.
486+
487+
<dt><dfn>end</dfn>
488+
<dd>
489+
End alignment of this box's <a>scroll snap area</a>
490+
within the scroller's <a>scroll snap target area</a>
491+
is a valid <a>snap position</a>.
492+
Equivalent to ''100%''.
493+
494+
<dt><dfn>center</dfn>
495+
<dd>
496+
Center alignment of this box's <a>scroll snap area</a>
497+
within the scroller's <a>scroll snap target area</a>
498+
is a valid <a>snap position</a>.
499+
Equivalent to ''50%''.
500+
501+
<dt><dfn><<percentage>></dfn>
502+
<dd>
503+
Percentage alignment of this box's <a>scroll snap area</a>
504+
within the scroller's <a>scroll snap target area</a>
505+
is a valid <a>snap position</a>,
506+
where the percentage represents a position between
507+
''scroll-snap-align/start'' alignment (''0%'') and ''scroll-snap-align/end'' alignment (''100%'').
508+
509+
<dt><dfn>edges</dfn>
510+
<dd>
511+
Both start alignment and end alignment of this box's <a>scroll snap area</a>
512+
within the scroller's <a>scroll snap target area</a>
513+
is a valid <a>snap position</a>.
514+
Equivalent to ''50%''.
515+
</dl>
516+
517+
If no <a>scroll axis keyword</a> is specified, then
518+
a single <a>scroll alignment value</a> specifies alignment in the block axis only;
519+
if two values are specified, then
520+
the first value specifies alignment in the inline axis;
521+
and the second value (if any) specifies alignment in the block axis.
522+
<span class="issue">Is the correct default assignment?</span>
523+
524+
The <dfn>scroll axis keywords</dfn>
525+
allow targeting a specific axis
526+
or requesting simultaneous 2D alignment,
527+
and are defined as follows:
528+
529+
<dl dfn-type=value dfn-for=scroll-snap-align>
530+
<dt><dfn>x</dfn>
531+
<dt><dfn>y</dfn>
532+
<dd>
533+
The specified alignment applies to the x (horizontal) or y (vertical) axis, respectively.
534+
<dt><dfn>inline</dfn>
535+
<dt><dfn>block</dfn>
536+
<dd>
537+
The specified alignment applies to the inline or block axis, respectively.
538+
<dt><dfn>xy</dfn>
539+
<dd>
540+
The specified 2-value alignment applies to the x and y axes
541+
(rather than to the block and inline axes).
542+
<dt><dfn>point</dfn>
543+
<dd>
544+
The <a>snap position</a> is only valid when both axes are aligned as specified;
545+
otherwise the <a>snap position</a> in each axis
546+
is independent of alignment in the other axis.
547+
</dl>
548+
549+
Note: Remember that in <a>vertical writing modes</a> the block and inline axes
550+
correspond to the x and y axes, and not the y and x axes, respectively.
453551

454552
If the <a>snap area</a> is larger than the <a>snap target area</a> in a particular axis,
455553
then any scroll position in which the <a>snap area</a> covers the <a>snap target area</a>
@@ -472,6 +570,23 @@ Scroll Snapping Alignment: the 'scroll-snap-align' property {#scroll-snap-align}
472570
until you fling out or pull it sufficiently to trigger snapping to a different <a>snap position</a>.
473571
</div>
474572

573+
<details class="why">
574+
<summary>Why no <<length>> or <<position>> values?</summary>
575+
The values here represent alignments
576+
(in the sense of 'align-self' and 'justify-self'),
577+
so are consistent with that syntax.
578+
We chose to use this simpler syntax without lengths
579+
because the 'scroll-snap-area' concept already provides length offsets--
580+
but does so in a smarter way, that degrades better on small screens
581+
(see above) because it provides more information (a box, rather than a point) to the UA.
582+
We could have also added lengths here,
583+
but it would provide multiple ways to do the same thing,
584+
which is additional overhead for implementation, testing, and (most importantly) author learning.
585+
It also introduces more room for cascading errors,
586+
and guides authors in the wrong direction--
587+
away from 'scroll-snap-area'.
588+
</details>
589+
475590
<!--
476591
### Combining 1D and 2D Snap Alignments ### {#combo-snapping}
477592

@@ -744,3 +859,122 @@ Aligning the Group: the 'scroll-snap-group' property {#scroll-snap-group}
744859

745860
Specifies the alignment of a group-snapped group's area within the viewport.
746861
-->
862+
863+
Appendix A: Longhands {#longhands}
864+
=====================
865+
866+
Physical Longhands for 'scroll-snap-padding' {#padding-longhands-physical}
867+
--------------------------------------------
868+
869+
<pre class="propdef">
870+
Name: scroll-snap-padding-top, scroll-snap-padding-right, scroll-snap-padding-bottom, scroll-snap-padding-left
871+
Value: <<length>>
872+
Initial: border-box
873+
Applies to: all elements
874+
Inherited: no
875+
Computed value: as specified, with lengths made absolute
876+
Animatable: as length, if ''border-box''/''margin-box'' are constant
877+
Media: interactive
878+
</pre>
879+
880+
These <a>longhands</a> of 'scroll-snap-padding' specify
881+
the top, right, bottom, and left
882+
edges of the <a>scroll snap target area</a>,
883+
respectively.
884+
885+
Flow-relative Longhands for 'scroll-snap-padding' {#padding-longhands-logical}
886+
-------------------------------------------------
887+
888+
<pre class="propdef">
889+
Name: scroll-snap-padding-inline-start, scroll-snap-padding-block-start, scroll-snap-padding-inline-end, scroll-padding-block-end
890+
Value: <<length>>
891+
Initial: border-box
892+
Applies to: all elements
893+
Inherited: no
894+
Computed value: as specified, with lengths made absolute
895+
Animatable: as length, if ''border-box''/''margin-box'' are constant
896+
Media: interactive
897+
</pre>
898+
899+
These <a>longhands</a> of 'scroll-snap-padding' specify
900+
the block-start, inline-start, block-end, and inline-end
901+
edges of the <a>scroll snap target area</a>,
902+
respectively.
903+
904+
<pre class="propdef">
905+
Name: scroll-snap-padding-block, scroll-snap-padding-inline
906+
Value: <<length>>{1,2}
907+
Initial: border-box
908+
Applies to: all elements
909+
Inherited: no
910+
Computed value: as specified, with lengths made absolute
911+
Animatable: as length, if ''border-box''/''margin-box'' are constant
912+
Media: interactive
913+
</pre>
914+
915+
These <a>shorthands</a> of 'scroll-snap-area-block-start' + 'scroll-snap-area-block-end'
916+
and 'scroll-snap-area-inline-start' + 'scroll-snap-area-inline-end'
917+
are <a>longhands</a> of 'scroll-snap-padding', and
918+
specify the block-axis and inline-axis
919+
edges of the <a>scroll snap target area</a>,
920+
respectively.
921+
If two values are specified, the first gives the start value
922+
and the second gives the end value.
923+
924+
Physical Longhands for 'scroll-snap-area' {#area-longhands-physical}
925+
-----------------------------------------
926+
927+
<pre class="propdef">
928+
Name: scroll-snap-area-top, scroll-snap-area-right, scroll-snap-area-bottom, scroll-snap-area-left
929+
Value: [ border-box | margin-box ] || <<length>>
930+
Initial: border-box
931+
Applies to: all elements
932+
Inherited: no
933+
Computed value: as specified, with lengths made absolute
934+
Animatable: as length, if ''border-box''/''margin-box'' are constant
935+
Media: interactive
936+
</pre>
937+
938+
These <a>longhands</a> of 'scroll-snap-area' specify
939+
the top, right, bottom, and left
940+
edges of the <a>scroll snap area</a>,
941+
respectively.
942+
943+
Flow-relative Longhands for 'scroll-snap-area' {#area-longhands-logical}
944+
--------------------------------------------
945+
946+
<pre class="propdef">
947+
Name: scroll-snap-area-block-start, scroll-snap-area-inline-start, scroll-snap-area-block-end, scroll-snap-area-inline-end
948+
Value: [ border-box | margin-box ] || <<length>>
949+
Initial: border-box
950+
Applies to: all elements
951+
Inherited: no
952+
Computed value: as specified, with lengths made absolute
953+
Animatable: as length, if ''border-box''/''margin-box'' are constant
954+
Media: interactive
955+
</pre>
956+
957+
These <a>longhands</a> of 'scroll-snap-area' specify
958+
the block-start, inline-start, block-end, and inline-end
959+
edges of the <a>scroll snap area</a>,
960+
respectively.
961+
962+
<pre class="propdef">
963+
Name: scroll-snap-area-block, scroll-snap-area-inline
964+
Value: [ border-box | margin-box ] || <<length>>{1,2}
965+
Initial: border-box
966+
Applies to: all elements
967+
Inherited: no
968+
Computed value: as specified, with lengths made absolute
969+
Animatable: as length, if ''border-box''/''margin-box'' are constant
970+
Media: interactive
971+
</pre>
972+
973+
These <a>shorthands</a> of 'scroll-snap-area-block-start'/'scroll-snap-area-block-end'
974+
and 'scroll-snap-area-inline-start'/'scroll-snap-area-inline-end'
975+
are <a>longhands</a> of 'scroll-snap-area', and specify
976+
the block-axis and inline-axis
977+
edges of the <a>scroll snap area</a>,
978+
respectively.
979+
If two values are specified, the first gives the start value
980+
and the second gives the end value.

0 commit comments

Comments
 (0)