Skip to content

Commit a57db33

Browse files
tabatkinstabatkins
committed
[css-scroll-snap-2][editorial] Indentation to tabs
1 parent 5c2487c commit a57db33

File tree

1 file changed

+99
-99
lines changed

1 file changed

+99
-99
lines changed

‎css-scroll-snap-2/Overview.bs

Lines changed: 99 additions & 99 deletions
Original file line numberDiff line numberDiff line change
@@ -21,92 +21,92 @@ Status Text:
2121
Introduction {#intro}
2222
=====================
2323

24-
<em>This section is not normative.</em>
24+
<em>This section is not normative.</em>
2525

26-
<em>This is currently a draft spec over Scroll Snap 1.</em>
26+
<em>This is currently a draft spec over Scroll Snap 1.</em>
2727

28-
Scroll experiences don't always start at the beginning. Interactions with
29-
carousels, swipe controls, and listviews often start somewhere in the middle,
30-
and each require Javascript to set this position on page load.
31-
By enabling CSS to specify this scroll start x or y position,
32-
both users, page authors and browsers benefit.
28+
Scroll experiences don't always start at the beginning. Interactions with
29+
carousels, swipe controls, and listviews often start somewhere in the middle,
30+
and each require Javascript to set this position on page load.
31+
By enabling CSS to specify this scroll start x or y position,
32+
both users, page authors and browsers benefit.
3333

34-
In addition to setting an initial scroll position,
35-
developers need insights and events into Scroll Snap
36-
like which element is snapped on an axis,
37-
when the snap event is changing and/or indeterminate,
38-
events for snap completion, and conveniences for
39-
snapping to children programatically.
34+
In addition to setting an initial scroll position,
35+
developers need insights and events into Scroll Snap
36+
like which element is snapped on an axis,
37+
when the snap event is changing and/or indeterminate,
38+
events for snap completion, and conveniences for
39+
snapping to children programatically.
4040

4141

4242
Setting Where Scroll Starts {#properties-on-the-scroll-container}
43-
======================================================================================================
43+
=================================================================
4444

4545
<!-- BIG TEXT: SCROLL START -->
4646

4747
The 'scroll-start' property {#scroll-start}
48-
--------------------------------------------------------------------------
49-
50-
<pre class="propdef">
51-
Name: scroll-start
52-
Value: auto | [end | center] | <<length-percentage>>
53-
Initial: none
54-
Applies to: all elements
55-
Inherited: no
56-
Percentages: n/a
57-
Computed value: specified keyword(s)
58-
Animation type: discrete
59-
</pre>
48+
-------------------------------------------
49+
50+
<pre class="propdef">
51+
Name: scroll-start
52+
Value: auto | [end | center] | <<length-percentage>>
53+
Initial: none
54+
Applies to: all elements
55+
Inherited: no
56+
Percentages: n/a
57+
Computed value: specified keyword(s)
58+
Animation type: discrete
59+
</pre>
6060

6161
This property is a shorthand property that sets all of the scroll-start-* longhands in one declaration. It does not work like 'margin', where a value is repeated to all sides. {{scroll-start: 200px}} is not {{scroll-start: 200px 200px}}, it's {{scroll-start: 200px 0}}. Inline is first, followed by block.
6262

6363
Values are defined as follows:
6464

65-
<dl dfn-type=value dfn-for="scroll-snap-type">
66-
<dt><dfn>end</dfn>
67-
<dd>
68-
Scroll position starts at the end of a <a>scroll container</a>.
69-
Property value is at risk, may be duplicative.
65+
<dl dfn-type=value dfn-for="scroll-snap-type">
66+
<dt><dfn>end</dfn>
67+
<dd>
68+
Scroll position starts at the end of a <a>scroll container</a>.
69+
Property value is at risk, may be duplicative.
7070

71-
<dt><dfn>center</dfn>
72-
<dd>
73-
Scroll position starts at the middle of a <a>scroll container</a>.
74-
Property value is at risk, may be duplicative.
75-
</dl>
71+
<dt><dfn>center</dfn>
72+
<dd>
73+
Scroll position starts at the middle of a <a>scroll container</a>.
74+
Property value is at risk, may be duplicative.
75+
</dl>
7676

7777
Styling Snapped Items {#todo}
78-
======================================================================================================
78+
=============================
7979

8080
The Snapped-element Pseudo-class: ':snapped' {#snapped}
81-
--------------------------------------------------------------------------
81+
-------------------------------------------------------
8282

8383
The {{:snapped}} pseudo-class matches any scroll snap
8484
targets, regardless of axis. The longform physical and logical pseudo-class
85-
selectors allow for more finite snapped children styling
85+
selectors allow for more finite snapped children styling
8686
as they can target an individual axis.
8787

8888
More specific options are defined as follows:
8989

90-
<dl dfn-type=value dfn-for="scroll-snap-type">
91-
<dt><dfn>:snapped-x</dfn>
92-
<dd>
93-
Matches the child snapped on the {{x}} axis.
90+
<dl dfn-type=value dfn-for="scroll-snap-type">
91+
<dt><dfn>:snapped-x</dfn>
92+
<dd>
93+
Matches the child snapped on the {{x}} axis.
9494

95-
<dt><dfn>:snapped-y</dfn>
96-
<dd>
97-
Matches the child snapped on the {{y}} axis.
95+
<dt><dfn>:snapped-y</dfn>
96+
<dd>
97+
Matches the child snapped on the {{y}} axis.
9898

99-
<dt><dfn>:snapped-inline</dfn>
100-
<dd>
101-
Matches the child snapped on the {{inline}} axis.
99+
<dt><dfn>:snapped-inline</dfn>
100+
<dd>
101+
Matches the child snapped on the {{inline}} axis.
102102

103-
<dt><dfn>:snapped-block</dfn>
104-
<dd>
105-
Matches the child snapped on the {{block}} axis.
106-
</dl>
103+
<dt><dfn>:snapped-block</dfn>
104+
<dd>
105+
Matches the child snapped on the {{block}} axis.
106+
</dl>
107107

108108
Snap Events {#todo}
109-
======================================================================================================
109+
===================
110110

111111
<!--
112112
████████ ██ ██ ████████ ██ ██ ████████ ██████
@@ -119,28 +119,28 @@ Snap Events {#todo}
119119
-->
120120

121121
'snapChanged' and 'snapChanging'
122-
--------------------------------------------------------------------------
123-
124-
CSS scroll snap points are often used as a mechanism to
125-
create scroll interactive "selection" components,
126-
where selection is determined with javascript intersection observers
127-
and a scroll end guestimate. By creating a built-in event,
128-
the invisible state will become actionable,
129-
at the right time, and always correct.
130-
131-
<table class="data" id="eventhandlers">
132-
<thead>
133-
<tr>
134-
<th>Event handler
135-
<th>Event handler event type
136-
<tbody>
137-
<tr>
138-
<th>{{snapChanged}}
139-
<td>{{scroll!!event}}
140-
<tr>
141-
<th>{{snapChanging}}
142-
<td>{{scroll!!event}}
143-
</table>
122+
--------------------------------
123+
124+
CSS scroll snap points are often used as a mechanism to
125+
create scroll interactive "selection" components,
126+
where selection is determined with javascript intersection observers
127+
and a scroll end guestimate. By creating a built-in event,
128+
the invisible state will become actionable,
129+
at the right time, and always correct.
130+
131+
<table class="data" id="eventhandlers">
132+
<thead>
133+
<tr>
134+
<th>Event handler
135+
<th>Event handler event type
136+
<tbody>
137+
<tr>
138+
<th>{{snapChanged}}
139+
<td>{{scroll!!event}}
140+
<tr>
141+
<th>{{snapChanging}}
142+
<td>{{scroll!!event}}
143+
</table>
144144

145145
<!--
146146
██ ███████ ██ ██ ██████ ██ ██ ███ ██ ██ ████████ ██████
@@ -161,31 +161,31 @@ interact as defined in [[!CSS-LOGICAL-1]].
161161
Physical Longhands for 'scroll-start' {#scroll-start-longhands-physical}
162162
----------------------------------------------------------------------
163163

164-
<pre class="propdef">
165-
Name: scroll-start-x, scroll-start-y
166-
Value: auto | [end | center] | <<length-percentage>>
167-
Initial: auto
168-
Applies to: <a>scroll containers</a>
169-
Inherited: no
170-
Percentages: relative to the scroll container’s scrollport
171-
Computed value: the keyword ''scroll-start/auto'' or a computed <<length-percentage>> value
172-
Animation type: by computed value type
173-
</pre>
164+
<pre class="propdef">
165+
Name: scroll-start-x, scroll-start-y
166+
Value: auto | [end | center] | <<length-percentage>>
167+
Initial: auto
168+
Applies to: <a>scroll containers</a>
169+
Inherited: no
170+
Percentages: relative to the scroll container’s scrollport
171+
Computed value: the keyword ''scroll-start/auto'' or a computed <<length-percentage>> value
172+
Animation type: by computed value type
173+
</pre>
174174

175-
Negative values are invalid.
175+
Negative values are invalid.
176176

177177
Flow-relative Longhands for 'scroll-start' {#scroll-start-longhands-logical}
178178
--------------------------------------------------------------------------
179179

180-
<pre class="propdef">
181-
Name: scroll-start-inline, scroll-start-block
182-
Value: auto | [end | center] | <<length-percentage>>
183-
Initial: auto
184-
Applies to: <a>scroll containers</a>
185-
Inherited: no
186-
Percentages: relative to the scroll container’s scrollport
187-
Computed value: the keyword ''scroll-start/auto'' or a computed <<length-percentage>> value
188-
Animation type: by computed value type
189-
</pre>
190-
191-
Negative values are invalid.
180+
<pre class="propdef">
181+
Name: scroll-start-inline, scroll-start-block
182+
Value: auto | [end | center] | <<length-percentage>>
183+
Initial: auto
184+
Applies to: <a>scroll containers</a>
185+
Inherited: no
186+
Percentages: relative to the scroll container’s scrollport
187+
Computed value: the keyword ''scroll-start/auto'' or a computed <<length-percentage>> value
188+
Animation type: by computed value type
189+
</pre>
190+
191+
Negative values are invalid.

0 commit comments

Comments
 (0)