@@ -212,7 +212,7 @@ Overview {#overview}
212
212
<a>Snap positions</a> are specified
213
213
as a particular alignment ('scroll-snap-align' )
214
214
of an element’s <a>scroll snap area</a>
215
- (its border bounding box, as modified by 'scroll-snap- margin' )
215
+ (its border bounding box, as modified by 'scroll-margin' )
216
216
within the <a>scroll container</a> ’s <a>snapport</a>
217
217
(its scrollport, as reduced by 'scroll-padding' ).
218
218
This is conceptually equivalent to specifying the alignment of
@@ -484,11 +484,11 @@ Aligning Scroll Snap Areas: Properties on the elements {#properties-on-the-elem
484
484
██ ██ ██ ██ ████████ ██ ██
485
485
-->
486
486
487
- Scroll Snapping Area: the 'scroll-snap- margin' property {#scroll-snap -margin}
488
- -----------------------------------------------------------------------------
487
+ Scroll Snapping Area: the 'scroll-margin' property {#scroll-margin}
488
+ -------------------------------------------------------------------
489
489
490
490
<pre class="propdef">
491
- Name : scroll-snap- margin
491
+ Name : scroll-margin
492
492
Value : <<length>>{1,4}
493
493
Initial : 0
494
494
Applies to : all elements
@@ -500,7 +500,7 @@ Scroll Snapping Area: the 'scroll-snap-margin' property {#scroll-snap-margin}
500
500
</pre>
501
501
502
502
This property is a <a>shorthand property</a> that sets
503
- all of the <a href="#longhands"><css>scroll-snap- margin-*</css> longhands</a>
503
+ all of the <a href="#longhands"><css>scroll-margin-*</css> longhands</a>
504
504
in one declaration,
505
505
assigning values to the longhands representing each side
506
506
exactly as the 'margin' property does for its longhands.
@@ -1008,11 +1008,11 @@ Flow-relative Longhands for 'scroll-padding' {#padding-longhands-logical}
1008
1008
If two values are specified, the first gives the start value
1009
1009
and the second gives the end value.
1010
1010
1011
- Physical Longhands for 'scroll-snap- margin' {#margin-longhands-physical}
1012
- -------------------------------------------------------------------------
1011
+ Physical Longhands for 'scroll-margin' {#margin-longhands-physical}
1012
+ --------------------------------------------------------------------
1013
1013
1014
1014
<pre class="propdef">
1015
- Name : scroll-snap- margin-top, scroll-snap- margin-right, scroll-snap- margin-bottom, scroll-snap -margin-left
1015
+ Name : scroll-margin-top, scroll-margin-right, scroll-margin-bottom, scroll-margin-left
1016
1016
Value : <<length>>
1017
1017
Initial : 0
1018
1018
Applies to : all elements
@@ -1023,15 +1023,15 @@ Physical Longhands for 'scroll-snap-margin' {#margin-longhands-physical}
1023
1023
Animatable : as length
1024
1024
</pre>
1025
1025
1026
- These <a>longhands</a> of 'scroll-snap- margin' specify
1026
+ These <a>longhands</a> of 'scroll-margin' specify
1027
1027
the top, right, bottom, and left edges
1028
1028
of the <a>scroll snap area</a> , respectively.
1029
1029
1030
- Flow-relative Longhands for 'scroll-snap- margin' {#margin-longhands-logical}
1031
- -----------------------------------------------------------------------------
1030
+ Flow-relative Longhands for 'scroll-margin' {#margin-longhands-logical}
1031
+ ------------------------------------------------------------------------
1032
1032
1033
1033
<pre class="propdef">
1034
- Name : scroll-snap- margin-block-start, scroll-snap- margin-inline-start, scroll-snap- margin-block-end, scroll-snap -margin-inline-end
1034
+ Name : scroll-margin-block-start, scroll-margin-inline-start, scroll-margin-block-end, scroll-margin-inline-end
1035
1035
Value : <<length>>
1036
1036
Initial : 0
1037
1037
Applies to : all elements
@@ -1042,12 +1042,12 @@ Flow-relative Longhands for 'scroll-snap-margin' {#margin-longhands-logical}
1042
1042
Animatable : as length
1043
1043
</pre>
1044
1044
1045
- These <a>longhands</a> of 'scroll-snap- margin' specify the
1045
+ These <a>longhands</a> of 'scroll-margin' specify the
1046
1046
block-start, inline-start, block-end, and inline-end edges
1047
1047
of the <a>scroll snap area</a> , respectively.
1048
1048
1049
1049
<pre class="propdef">
1050
- Name : scroll-snap- margin-block, scroll-snap -margin-inline
1050
+ Name : scroll-margin-block, scroll-margin-inline
1051
1051
Value : <<length>>{1,2}
1052
1052
Initial : 0
1053
1053
Applies to : all elements
@@ -1058,9 +1058,9 @@ Flow-relative Longhands for 'scroll-snap-margin' {#margin-longhands-logical}
1058
1058
Animatable : as length
1059
1059
</pre>
1060
1060
1061
- These <a>shorthands</a> of 'scroll-snap- margin-block-start' + 'scroll-snap -margin-block-end'
1062
- and 'scroll-snap- margin-inline-start' + 'scroll-snap -margin-inline-end'
1063
- are <a>longhands</a> of 'scroll-snap- margin' ,
1061
+ These <a>shorthands</a> of 'scroll-margin-block-start' + 'scroll-margin-block-end'
1062
+ and 'scroll-margin-inline-start' + 'scroll-margin-inline-end'
1063
+ are <a>longhands</a> of 'scroll-margin' ,
1064
1064
and specify the block-axis and inline-axis edges
1065
1065
of the <a>scroll snap area</a> , respectively.
1066
1066
@@ -1097,10 +1097,13 @@ Changes Since 24 August 2017 CR {#changes-20170824}
1097
1097
1098
1098
Changes since the <a href="https://www.w3.org/TR/2017/CR-css-scroll-snap-1-20170824/">24 August 2017 Candidate Recommendation</a> include:
1099
1099
1100
- * '':target'' /{{scrollIntoView()}} /etc must use snap positions if snapping is turned on,
1101
- and may use them even if it's off.
1102
- * '':target'' /{{scrollIntoView()}} /etc should take 'scroll-snap-margin' into account,
1103
- regardless of whether snapping is turned on or not.
1100
+ * '':target'' /{{scrollIntoView()}} /etc should take 'scroll-margin' into account,
1101
+ regardless of whether snapping is turned on or not.
1102
+ * '':target'' /{{scrollIntoView()}} /etc must (rather than should)
1103
+ use snap positions if snapping is turned on.
1104
+ * Renamed <css> scroll-snap-margin</css> to 'scroll-margin'
1105
+ to reflect its more generic role in providing breathing space
1106
+ for scrolling to an element regardless of snapping behavior.
1104
1107
1105
1108
Changes Since 20 October 2016 CR {#changes-20161020}
1106
1109
----------------------------------------------------
@@ -1126,7 +1129,7 @@ Changes Since 20 October 2016 CR {#changes-20161020}
1126
1129
may push off-screen the [=snap area=] that the other axis would otherwise align to,
1127
1130
making its [=snap position=] invalid and therefore unchooseable.</p></ins>
1128
1131
</blockquote>
1129
- <li> Clarified how the 'scroll-padding' and 'scroll-snap- margin' shorthands
1132
+ <li> Clarified how the 'scroll-padding' and 'scroll-margin' shorthands
1130
1133
assign values to their longhands.
1131
1134
(<a href="https://github.com/w3c/csswg-drafts/issues/1050">Issue 1050</a> )
1132
1135
<li> Clarified that scroll snapping does not mandate any particular input method.
0 commit comments