@webref/css 6.10.3 → 6.11.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CSS.json +83 -8
- package/README.md +1 -0
- package/SVG.json +27 -0
- package/compat.json +75 -0
- package/compositing.json +22 -0
- package/css-align.json +59 -0
- package/css-anchor-position.json +214 -19
- package/css-animations-2.json +13 -0
- package/css-animations.json +34 -0
- package/css-backgrounds-4.json +12 -0
- package/css-backgrounds.json +78 -0
- package/css-borders.json +91 -0
- package/css-box.json +48 -0
- package/css-break.json +50 -0
- package/css-cascade-6.json +3 -0
- package/css-cascade.json +10 -0
- package/css-color-5.json +74 -0
- package/css-color-6.json +6 -0
- package/css-color-adjust.json +14 -0
- package/css-color.json +273 -1
- package/css-conditional-4.json +2 -0
- package/css-conditional-5.json +7 -0
- package/css-conditional.json +6 -0
- package/css-contain-3.json +27 -0
- package/css-contain.json +12 -0
- package/css-content.json +53 -0
- package/css-counter-styles.json +85 -0
- package/css-display.json +48 -0
- package/css-easing.json +24 -0
- package/css-env.json +11 -0
- package/css-exclusions.json +11 -0
- package/css-extensions.json +4 -0
- package/css-flexbox.json +24 -0
- package/css-fonts-5.json +46 -0
- package/css-fonts.json +221 -9
- package/css-gcpm-4.json +10 -4
- package/css-gcpm.json +13 -1
- package/css-grid-3.json +1 -0
- package/css-grid.json +88 -0
- package/css-highlight-api.json +3 -1
- package/css-images-4.json +49 -0
- package/css-images-5.json +3 -0
- package/css-images.json +46 -0
- package/css-inline.json +93 -0
- package/css-layout-api.json +1 -0
- package/css-line-grid.json +14 -0
- package/css-link-params.json +2 -0
- package/css-lists.json +34 -0
- package/css-logical.json +27 -0
- package/css-masking.json +69 -0
- package/css-multicol-2.json +5 -0
- package/css-multicol.json +19 -0
- package/css-namespaces.json +2 -0
- package/css-nav.json +10 -0
- package/css-nesting.json +2 -1
- package/css-overflow-4.json +37 -1
- package/css-overflow.json +38 -0
- package/css-overscroll.json +20 -0
- package/css-page-floats.json +34 -0
- package/css-page.json +52 -0
- package/css-paint-api.json +1 -0
- package/css-position-4.json +5 -1
- package/css-position.json +50 -0
- package/css-properties-values-api.json +4 -0
- package/css-pseudo.json +23 -10
- package/css-regions.json +3 -0
- package/css-rhythm.json +15 -0
- package/css-round-display.json +8 -0
- package/css-ruby.json +22 -0
- package/css-scoping.json +8 -4
- package/css-scroll-anchoring.json +3 -0
- package/css-scroll-snap-2.json +55 -5
- package/css-scroll-snap.json +53 -0
- package/css-scrollbars.json +7 -0
- package/css-shadow-parts.json +1 -0
- package/css-shapes-2.json +34 -0
- package/css-shapes.json +22 -0
- package/css-size-adjust.json +4 -0
- package/css-sizing-4.json +59 -0
- package/css-sizing.json +42 -0
- package/css-speech.json +115 -0
- package/css-syntax.json +43 -0
- package/css-tables.json +5 -0
- package/css-text-4.json +161 -0
- package/css-text-decor-4.json +75 -0
- package/css-text-decor.json +32 -0
- package/css-text.json +70 -0
- package/css-transforms-2.json +37 -0
- package/css-transforms.json +26 -0
- package/css-transitions-2.json +4 -0
- package/css-transitions.json +9 -0
- package/css-ui.json +92 -0
- package/css-values-5.json +59 -0
- package/css-values.json +115 -0
- package/css-variables.json +2 -0
- package/css-view-transitions-2.json +8 -1
- package/css-view-transitions.json +15 -5
- package/css-viewport.json +43 -0
- package/css-will-change.json +6 -0
- package/css-writing-modes.json +26 -0
- package/fill-stroke.json +66 -0
- package/filter-effects-2.json +1 -0
- package/filter-effects.json +24 -0
- package/html.json +3 -0
- package/mathml-core.json +3 -0
- package/mediaqueries-5.json +121 -0
- package/mediaqueries.json +77 -0
- package/motion.json +32 -0
- package/package.json +1 -1
- package/scroll-animations.json +54 -0
- package/selectors.json +173 -72
- package/svg-strokes.json +3 -0
- package/upgrade-insecure-requests.json +2 -0
- package/webvtt.json +8 -4
package/motion.json
CHANGED
|
@@ -6,6 +6,7 @@
|
|
|
6
6
|
"properties": [
|
|
7
7
|
{
|
|
8
8
|
"name": "offset-path",
|
|
9
|
+
"href": "https://drafts.fxtf.org/motion-1/#propdef-offset-path",
|
|
9
10
|
"value": "none | <offset-path> || <coord-box>",
|
|
10
11
|
"initial": "none",
|
|
11
12
|
"appliesTo": "transformable elements",
|
|
@@ -19,36 +20,42 @@
|
|
|
19
20
|
{
|
|
20
21
|
"name": "none",
|
|
21
22
|
"prose": "The element does not have an offset transform.",
|
|
23
|
+
"href": "https://drafts.fxtf.org/motion-1/#valdef-offset-path-none",
|
|
22
24
|
"type": "value",
|
|
23
25
|
"value": "none"
|
|
24
26
|
},
|
|
25
27
|
{
|
|
26
28
|
"name": "<offset-path> || <coord-box>",
|
|
27
29
|
"prose": "The element has an offset transform, defined by some offset path. See § 2.7 Calculating The Offset Transform for details on how to calculate the offset transform. All the usual effects of having a transform apply (such as creating a stacking context, etc.) See CSS Transforms 1 § 2 The Transform Rendering Model for details. If <offset-path> is omitted, it defaults to inset(0 round X), where X is the value of border-radius on the element that establishes the containing block for this element. If <coord-box> is omitted, it defaults to border-box. See the specific values (below) for the interpretation of each component.",
|
|
30
|
+
"href": "https://drafts.fxtf.org/motion-1/#valdef-offset-path-offset-path--coord-box",
|
|
28
31
|
"type": "value",
|
|
29
32
|
"value": "<offset-path> || <coord-box>"
|
|
30
33
|
},
|
|
31
34
|
{
|
|
32
35
|
"name": "<ray()>",
|
|
33
36
|
"prose": "The offset path is a line extending from the origin at some angle. See § 2.1.1 The ray() Function for details. The <coord-box> provides the reference box for the ray.",
|
|
37
|
+
"href": "https://drafts.fxtf.org/motion-1/#valdef-offset-path-ray",
|
|
34
38
|
"type": "value",
|
|
35
39
|
"value": "<ray()>"
|
|
36
40
|
},
|
|
37
41
|
{
|
|
38
42
|
"name": "<url>",
|
|
39
43
|
"prose": "A URL reference to an SVG shape element. The offset path is the referenced element’s equivalent path. [SVG2] If the URL does not reference a shape element (because it references a different element, or resolves to a non-SVG document, or doesn’t resolve at all, etc) this behaves as path(\"m 0 0\") (a <basic-shape>) instead. The <coord-box> defines the viewport and user coordinate system for the shape element, with the origin (the 0,0 point) at the top left corner, and units being 1px in size.",
|
|
44
|
+
"href": "https://drafts.fxtf.org/motion-1/#valdef-offset-path-url",
|
|
40
45
|
"type": "value",
|
|
41
46
|
"value": "<url>"
|
|
42
47
|
},
|
|
43
48
|
{
|
|
44
49
|
"name": "<basic-shape>",
|
|
45
50
|
"prose": "The offset path is the equivalent path of the <basic-shape> function. For all <basic-shape>s, if they accept an at <position> argument but that argument is omitted, and the element defines an offset starting position via offset-position, it uses the specified offset starting position for that argument. Otherwise it defaults as specified for each function. The <coord-box> provides the [=/reference box=] for the <basic-shape>.",
|
|
51
|
+
"href": "https://drafts.fxtf.org/motion-1/#valdef-offset-path-basic-shape",
|
|
46
52
|
"type": "value",
|
|
47
53
|
"value": "<basic-shape>"
|
|
48
54
|
},
|
|
49
55
|
{
|
|
50
56
|
"name": "<coord-box>",
|
|
51
57
|
"prose": "Defines the box that the <offset-path> sizes into. In CSS contexts, the boxes being referenced are from the element that establishes the containing block for this element. In SVG contexts, all values behave as view-box.",
|
|
58
|
+
"href": "https://drafts.fxtf.org/motion-1/#valdef-offset-path-coord-box",
|
|
52
59
|
"type": "value",
|
|
53
60
|
"value": "<coord-box>"
|
|
54
61
|
}
|
|
@@ -60,6 +67,7 @@
|
|
|
60
67
|
},
|
|
61
68
|
{
|
|
62
69
|
"name": "offset-distance",
|
|
70
|
+
"href": "https://drafts.fxtf.org/motion-1/#propdef-offset-distance",
|
|
63
71
|
"value": "<length-percentage>",
|
|
64
72
|
"initial": "0",
|
|
65
73
|
"appliesTo": "transformable elements",
|
|
@@ -76,6 +84,7 @@
|
|
|
76
84
|
},
|
|
77
85
|
{
|
|
78
86
|
"name": "offset-position",
|
|
87
|
+
"href": "https://drafts.fxtf.org/motion-1/#propdef-offset-position",
|
|
79
88
|
"value": "normal | auto | <position>",
|
|
80
89
|
"initial": "normal",
|
|
81
90
|
"appliesTo": "transformable elements",
|
|
@@ -89,18 +98,21 @@
|
|
|
89
98
|
{
|
|
90
99
|
"name": "normal",
|
|
91
100
|
"prose": "The element does not have an offset starting position.",
|
|
101
|
+
"href": "https://drafts.fxtf.org/motion-1/#valdef-offset-position-normal",
|
|
92
102
|
"type": "value",
|
|
93
103
|
"value": "normal"
|
|
94
104
|
},
|
|
95
105
|
{
|
|
96
106
|
"name": "auto",
|
|
97
107
|
"prose": "The offset starting position is the top-left corner of the box.",
|
|
108
|
+
"href": "https://drafts.fxtf.org/motion-1/#valdef-offset-position-auto",
|
|
98
109
|
"type": "value",
|
|
99
110
|
"value": "auto"
|
|
100
111
|
},
|
|
101
112
|
{
|
|
102
113
|
"name": "<position>",
|
|
103
114
|
"prose": "The offset starting position is the result of using the <position> to position a 0x0 object area within the box’s containing block.",
|
|
115
|
+
"href": "https://drafts.fxtf.org/motion-1/#valdef-offset-position-position",
|
|
104
116
|
"type": "value",
|
|
105
117
|
"value": "<position>"
|
|
106
118
|
}
|
|
@@ -112,6 +124,7 @@
|
|
|
112
124
|
},
|
|
113
125
|
{
|
|
114
126
|
"name": "offset-anchor",
|
|
127
|
+
"href": "https://drafts.fxtf.org/motion-1/#propdef-offset-anchor",
|
|
115
128
|
"value": "auto | <position>",
|
|
116
129
|
"initial": "auto",
|
|
117
130
|
"appliesTo": "transformable elements",
|
|
@@ -125,12 +138,14 @@
|
|
|
125
138
|
{
|
|
126
139
|
"name": "auto",
|
|
127
140
|
"prose": "The anchor point is the same as the point indicated by transform-origin. Specifically, the computed value of transform-origin is resolved as a <position> against the element’s reference box.",
|
|
141
|
+
"href": "https://drafts.fxtf.org/motion-1/#valdef-offset-anchor-auto",
|
|
128
142
|
"type": "value",
|
|
129
143
|
"value": "auto"
|
|
130
144
|
},
|
|
131
145
|
{
|
|
132
146
|
"name": "<position>",
|
|
133
147
|
"prose": "The anchor point is the result of resolving the <position> against the element’s reference box.",
|
|
148
|
+
"href": "https://drafts.fxtf.org/motion-1/#valdef-offset-anchor-position",
|
|
134
149
|
"type": "value",
|
|
135
150
|
"value": "<position>"
|
|
136
151
|
}
|
|
@@ -142,6 +157,7 @@
|
|
|
142
157
|
},
|
|
143
158
|
{
|
|
144
159
|
"name": "offset-rotate",
|
|
160
|
+
"href": "https://drafts.fxtf.org/motion-1/#propdef-offset-rotate",
|
|
145
161
|
"value": "[ auto | reverse ] || <angle>",
|
|
146
162
|
"initial": "auto",
|
|
147
163
|
"appliesTo": "transformable elements",
|
|
@@ -155,18 +171,21 @@
|
|
|
155
171
|
{
|
|
156
172
|
"name": "auto",
|
|
157
173
|
"prose": "The offset transform will have a rotation component equal to the difference between the offset path’s direction at the offset position and the direction of the positive X axis (that is, a line going toward the right). See SVG’s direction of a path for details on how to calculate this. If specified with an <angle>, the angle is added to the rotation component.",
|
|
174
|
+
"href": "https://drafts.fxtf.org/motion-1/#valdef-offset-rotate-auto",
|
|
158
175
|
"type": "value",
|
|
159
176
|
"value": "auto"
|
|
160
177
|
},
|
|
161
178
|
{
|
|
162
179
|
"name": "reverse",
|
|
163
180
|
"prose": "Identical to auto, but adds an additional 180deg to the rotation.",
|
|
181
|
+
"href": "https://drafts.fxtf.org/motion-1/#valdef-offset-rotate-reverse",
|
|
164
182
|
"type": "value",
|
|
165
183
|
"value": "reverse"
|
|
166
184
|
},
|
|
167
185
|
{
|
|
168
186
|
"name": "<angle>",
|
|
169
187
|
"prose": "When specified on its own, adds a rotation component to the offset transform of the specified angle. (That is, offset-rotate: 45deg; is similar to transform: rotate(45deg); it’s just ordered to be part of the offset transform.)",
|
|
188
|
+
"href": "https://drafts.fxtf.org/motion-1/#valdef-offset-rotate-angle",
|
|
170
189
|
"type": "value",
|
|
171
190
|
"value": "<angle>"
|
|
172
191
|
}
|
|
@@ -178,6 +197,7 @@
|
|
|
178
197
|
},
|
|
179
198
|
{
|
|
180
199
|
"name": "offset",
|
|
200
|
+
"href": "https://drafts.fxtf.org/motion-1/#propdef-offset",
|
|
181
201
|
"value": "[ <'offset-position'>? [ <'offset-path'> [ <'offset-distance'> || <'offset-rotate'> ]? ]? ]! [ / <'offset-anchor'> ]?",
|
|
182
202
|
"initial": "see individual properties",
|
|
183
203
|
"appliesTo": "transformable elements",
|
|
@@ -196,35 +216,41 @@
|
|
|
196
216
|
"values": [
|
|
197
217
|
{
|
|
198
218
|
"name": "<offset-path>",
|
|
219
|
+
"href": "https://drafts.fxtf.org/motion-1/#typedef-offset-path",
|
|
199
220
|
"type": "type",
|
|
200
221
|
"value": "<ray()> | <url> | <basic-shape>"
|
|
201
222
|
},
|
|
202
223
|
{
|
|
203
224
|
"name": "ray()",
|
|
225
|
+
"href": "https://drafts.fxtf.org/motion-1/#funcdef-ray",
|
|
204
226
|
"type": "function",
|
|
205
227
|
"value": "ray( <angle> && <ray-size>? && contain? && [at <position>]? )",
|
|
206
228
|
"values": [
|
|
207
229
|
{
|
|
208
230
|
"name": "<angle>",
|
|
209
231
|
"prose": "The offset path is a single line segment that starts from the offset starting position and proceeds in the direction defined by the specified <angle>. (Its length is determined by the other arguments.) As with gradient functions, <angle> values are interpreted as bearing angles, with 0deg pointing up and positive angles representing clockwise rotation.",
|
|
232
|
+
"href": "https://drafts.fxtf.org/motion-1/#valdef-ray-angle",
|
|
210
233
|
"type": "value",
|
|
211
234
|
"value": "<angle>"
|
|
212
235
|
},
|
|
213
236
|
{
|
|
214
237
|
"name": "<ray-size>",
|
|
215
238
|
"prose": "Specifies the length of the offset path (the distance between the offset-distance: 0% and offset-distance: 100% points) relative to the containing box. If no <ray-size> is specified it defaults to closest-side. Individual keywords are:",
|
|
239
|
+
"href": "https://drafts.fxtf.org/motion-1/#valdef-ray-ray-size",
|
|
216
240
|
"type": "value",
|
|
217
241
|
"value": "<ray-size>"
|
|
218
242
|
},
|
|
219
243
|
{
|
|
220
244
|
"name": "contain",
|
|
221
245
|
"prose": "The length of the offset path is reduced so that the element stays within the containing block even at offset-distance: 100%. Specifically, the path’s length is reduced by half the width or half the height of the element’s border box, whichever is larger, and floored at zero.",
|
|
246
|
+
"href": "https://drafts.fxtf.org/motion-1/#valdef-ray-contain",
|
|
222
247
|
"type": "value",
|
|
223
248
|
"value": "contain"
|
|
224
249
|
},
|
|
225
250
|
{
|
|
226
251
|
"name": "at <position>",
|
|
227
252
|
"prose": "Specifies the origin of the ray, where the ray’s line begins (the 0% position). It’s resolved by using the <position> to position a 0x0 object area within the box’s containing block. If omitted, it uses the offset starting position of the element, given by offset-position. If the element doesn’t have an offset starting position either, it behaves as at center.",
|
|
253
|
+
"href": "https://drafts.fxtf.org/motion-1/#valdef-ray-at-position",
|
|
228
254
|
"type": "value",
|
|
229
255
|
"value": "at <position>"
|
|
230
256
|
}
|
|
@@ -232,36 +258,42 @@
|
|
|
232
258
|
},
|
|
233
259
|
{
|
|
234
260
|
"name": "<ray-size>",
|
|
261
|
+
"href": "https://drafts.fxtf.org/motion-1/#typedef-ray-size",
|
|
235
262
|
"type": "type",
|
|
236
263
|
"value": "closest-side | closest-corner | farthest-side | farthest-corner | sides",
|
|
237
264
|
"values": [
|
|
238
265
|
{
|
|
239
266
|
"name": "closest-side",
|
|
240
267
|
"prose": "The distance from the ray’s starting point to whichever side of the containing block is closest.",
|
|
268
|
+
"href": "https://drafts.fxtf.org/motion-1/#size-closest-side",
|
|
241
269
|
"type": "value",
|
|
242
270
|
"value": "closest-side"
|
|
243
271
|
},
|
|
244
272
|
{
|
|
245
273
|
"name": "closest-corner",
|
|
246
274
|
"prose": "The distance from the ray’s starting point to whichever corner of the containing block is closest.",
|
|
275
|
+
"href": "https://drafts.fxtf.org/motion-1/#size-closest-corner",
|
|
247
276
|
"type": "value",
|
|
248
277
|
"value": "closest-corner"
|
|
249
278
|
},
|
|
250
279
|
{
|
|
251
280
|
"name": "farthest-side",
|
|
252
281
|
"prose": "The distance from the ray’s starting point to whichever side of the containing block is farthest.",
|
|
282
|
+
"href": "https://drafts.fxtf.org/motion-1/#size-farthest-side",
|
|
253
283
|
"type": "value",
|
|
254
284
|
"value": "farthest-side"
|
|
255
285
|
},
|
|
256
286
|
{
|
|
257
287
|
"name": "farthest-corner",
|
|
258
288
|
"prose": "The distance from the ray’s starting point to whichever corner of the containing block is farthest.",
|
|
289
|
+
"href": "https://drafts.fxtf.org/motion-1/#size-farthest-corner",
|
|
259
290
|
"type": "value",
|
|
260
291
|
"value": "farthest-corner"
|
|
261
292
|
},
|
|
262
293
|
{
|
|
263
294
|
"name": "sides",
|
|
264
295
|
"prose": "The distance from the ray’s starting point to the point where the offset path intersects the containing block’s boundary. If the ray’s starting point is on the containing block’s boundary, or outside its bounds entirely, the distance is zero.",
|
|
296
|
+
"href": "https://drafts.fxtf.org/motion-1/#size-sides",
|
|
265
297
|
"type": "value",
|
|
266
298
|
"value": "sides"
|
|
267
299
|
}
|
package/package.json
CHANGED
package/scroll-animations.json
CHANGED
|
@@ -6,6 +6,7 @@
|
|
|
6
6
|
"properties": [
|
|
7
7
|
{
|
|
8
8
|
"name": "scroll-timeline-name",
|
|
9
|
+
"href": "https://drafts.csswg.org/scroll-animations-1/#propdef-scroll-timeline-name",
|
|
9
10
|
"value": "[ none | <dashed-ident> ]#",
|
|
10
11
|
"initial": "none",
|
|
11
12
|
"appliesTo": "all elements",
|
|
@@ -21,6 +22,7 @@
|
|
|
21
22
|
},
|
|
22
23
|
{
|
|
23
24
|
"name": "scroll-timeline-axis",
|
|
25
|
+
"href": "https://drafts.csswg.org/scroll-animations-1/#propdef-scroll-timeline-axis",
|
|
24
26
|
"value": "[ block | inline | x | y ]#",
|
|
25
27
|
"initial": "block",
|
|
26
28
|
"appliesTo": "all elements",
|
|
@@ -33,42 +35,49 @@
|
|
|
33
35
|
{
|
|
34
36
|
"name": "block",
|
|
35
37
|
"prose": "Specifies to use the measure of progress along the block axis of the scroll container. (Default.)",
|
|
38
|
+
"href": "https://drafts.csswg.org/scroll-animations-1/#valdef-scroll-block",
|
|
36
39
|
"type": "value",
|
|
37
40
|
"value": "block"
|
|
38
41
|
},
|
|
39
42
|
{
|
|
40
43
|
"name": "inline",
|
|
41
44
|
"prose": "Specifies to use the measure of progress along the inline axis of the scroll container.",
|
|
45
|
+
"href": "https://drafts.csswg.org/scroll-animations-1/#valdef-scroll-inline",
|
|
42
46
|
"type": "value",
|
|
43
47
|
"value": "inline"
|
|
44
48
|
},
|
|
45
49
|
{
|
|
46
50
|
"name": "x",
|
|
47
51
|
"prose": "Specifies to use the measure of progress along the horizontal axis of the scroll container.",
|
|
52
|
+
"href": "https://drafts.csswg.org/scroll-animations-1/#valdef-scroll-x",
|
|
48
53
|
"type": "value",
|
|
49
54
|
"value": "x"
|
|
50
55
|
},
|
|
51
56
|
{
|
|
52
57
|
"name": "y",
|
|
53
58
|
"prose": "Specifies to use the measure of progress along the vertical axis of the scroll container.",
|
|
59
|
+
"href": "https://drafts.csswg.org/scroll-animations-1/#valdef-scroll-y",
|
|
54
60
|
"type": "value",
|
|
55
61
|
"value": "y"
|
|
56
62
|
},
|
|
57
63
|
{
|
|
58
64
|
"name": "nearest",
|
|
59
65
|
"prose": "Specifies to use the nearest ancestor scroll container. (Default.)",
|
|
66
|
+
"href": "https://drafts.csswg.org/scroll-animations-1/#valdef-scroll-nearest",
|
|
60
67
|
"type": "value",
|
|
61
68
|
"value": "nearest"
|
|
62
69
|
},
|
|
63
70
|
{
|
|
64
71
|
"name": "root",
|
|
65
72
|
"prose": "Specifies to use the document viewport as the scroll container.",
|
|
73
|
+
"href": "https://drafts.csswg.org/scroll-animations-1/#valdef-scroll-root",
|
|
66
74
|
"type": "value",
|
|
67
75
|
"value": "root"
|
|
68
76
|
},
|
|
69
77
|
{
|
|
70
78
|
"name": "self",
|
|
71
79
|
"prose": "Specifies to use the element’s own principal box as the scroll container. If the principal box is not a scroll container, then the scroll progress timeline is inactive.",
|
|
80
|
+
"href": "https://drafts.csswg.org/scroll-animations-1/#valdef-scroll-self",
|
|
72
81
|
"type": "value",
|
|
73
82
|
"value": "self"
|
|
74
83
|
}
|
|
@@ -80,6 +89,7 @@
|
|
|
80
89
|
},
|
|
81
90
|
{
|
|
82
91
|
"name": "scroll-timeline",
|
|
92
|
+
"href": "https://drafts.csswg.org/scroll-animations-1/#propdef-scroll-timeline",
|
|
83
93
|
"value": "[ <'scroll-timeline-name'> <'scroll-timeline-axis'>? ]#",
|
|
84
94
|
"initial": "see individual properties",
|
|
85
95
|
"appliesTo": "all elements",
|
|
@@ -95,6 +105,7 @@
|
|
|
95
105
|
},
|
|
96
106
|
{
|
|
97
107
|
"name": "view-timeline-name",
|
|
108
|
+
"href": "https://drafts.csswg.org/scroll-animations-1/#propdef-view-timeline-name",
|
|
98
109
|
"value": "[ none | <dashed-ident> ]#",
|
|
99
110
|
"initial": "none",
|
|
100
111
|
"appliesTo": "all elements",
|
|
@@ -110,6 +121,7 @@
|
|
|
110
121
|
},
|
|
111
122
|
{
|
|
112
123
|
"name": "view-timeline-axis",
|
|
124
|
+
"href": "https://drafts.csswg.org/scroll-animations-1/#propdef-view-timeline-axis",
|
|
113
125
|
"value": "[ block | inline | x | y ]#",
|
|
114
126
|
"initial": "block",
|
|
115
127
|
"appliesTo": "all elements",
|
|
@@ -122,42 +134,49 @@
|
|
|
122
134
|
{
|
|
123
135
|
"name": "block",
|
|
124
136
|
"prose": "Specifies to use the measure of progress along the block axis of the scroll container. (Default.)",
|
|
137
|
+
"href": "https://drafts.csswg.org/scroll-animations-1/#valdef-scroll-block",
|
|
125
138
|
"type": "value",
|
|
126
139
|
"value": "block"
|
|
127
140
|
},
|
|
128
141
|
{
|
|
129
142
|
"name": "inline",
|
|
130
143
|
"prose": "Specifies to use the measure of progress along the inline axis of the scroll container.",
|
|
144
|
+
"href": "https://drafts.csswg.org/scroll-animations-1/#valdef-scroll-inline",
|
|
131
145
|
"type": "value",
|
|
132
146
|
"value": "inline"
|
|
133
147
|
},
|
|
134
148
|
{
|
|
135
149
|
"name": "x",
|
|
136
150
|
"prose": "Specifies to use the measure of progress along the horizontal axis of the scroll container.",
|
|
151
|
+
"href": "https://drafts.csswg.org/scroll-animations-1/#valdef-scroll-x",
|
|
137
152
|
"type": "value",
|
|
138
153
|
"value": "x"
|
|
139
154
|
},
|
|
140
155
|
{
|
|
141
156
|
"name": "y",
|
|
142
157
|
"prose": "Specifies to use the measure of progress along the vertical axis of the scroll container.",
|
|
158
|
+
"href": "https://drafts.csswg.org/scroll-animations-1/#valdef-scroll-y",
|
|
143
159
|
"type": "value",
|
|
144
160
|
"value": "y"
|
|
145
161
|
},
|
|
146
162
|
{
|
|
147
163
|
"name": "nearest",
|
|
148
164
|
"prose": "Specifies to use the nearest ancestor scroll container. (Default.)",
|
|
165
|
+
"href": "https://drafts.csswg.org/scroll-animations-1/#valdef-scroll-nearest",
|
|
149
166
|
"type": "value",
|
|
150
167
|
"value": "nearest"
|
|
151
168
|
},
|
|
152
169
|
{
|
|
153
170
|
"name": "root",
|
|
154
171
|
"prose": "Specifies to use the document viewport as the scroll container.",
|
|
172
|
+
"href": "https://drafts.csswg.org/scroll-animations-1/#valdef-scroll-root",
|
|
155
173
|
"type": "value",
|
|
156
174
|
"value": "root"
|
|
157
175
|
},
|
|
158
176
|
{
|
|
159
177
|
"name": "self",
|
|
160
178
|
"prose": "Specifies to use the element’s own principal box as the scroll container. If the principal box is not a scroll container, then the scroll progress timeline is inactive.",
|
|
179
|
+
"href": "https://drafts.csswg.org/scroll-animations-1/#valdef-scroll-self",
|
|
161
180
|
"type": "value",
|
|
162
181
|
"value": "self"
|
|
163
182
|
}
|
|
@@ -169,6 +188,7 @@
|
|
|
169
188
|
},
|
|
170
189
|
{
|
|
171
190
|
"name": "view-timeline-inset",
|
|
191
|
+
"href": "https://drafts.csswg.org/scroll-animations-1/#propdef-view-timeline-inset",
|
|
172
192
|
"value": "[ [ auto | <length-percentage> ]{1,2} ]#",
|
|
173
193
|
"initial": "auto",
|
|
174
194
|
"appliesTo": "all elements",
|
|
@@ -181,12 +201,14 @@
|
|
|
181
201
|
{
|
|
182
202
|
"name": "auto",
|
|
183
203
|
"prose": "Indicates to use the value of scroll-padding.",
|
|
204
|
+
"href": "https://drafts.csswg.org/scroll-animations-1/#valdef-view-timeline-inset-auto",
|
|
184
205
|
"type": "value",
|
|
185
206
|
"value": "auto"
|
|
186
207
|
},
|
|
187
208
|
{
|
|
188
209
|
"name": "<length-percentage>",
|
|
189
210
|
"prose": "Like scroll-padding, defines an inward offset from the corresponding edge of the scrollport.",
|
|
211
|
+
"href": "https://drafts.csswg.org/scroll-animations-1/#valdef-view-timeline-inset-length-percentage",
|
|
190
212
|
"type": "value",
|
|
191
213
|
"value": "<length-percentage>"
|
|
192
214
|
}
|
|
@@ -198,6 +220,7 @@
|
|
|
198
220
|
},
|
|
199
221
|
{
|
|
200
222
|
"name": "view-timeline",
|
|
223
|
+
"href": "https://drafts.csswg.org/scroll-animations-1/#propdef-view-timeline",
|
|
201
224
|
"value": "[ <'view-timeline-name'> [ <'view-timeline-axis'> || <'view-timeline-inset'> ]? ]#",
|
|
202
225
|
"initial": "see individual properties",
|
|
203
226
|
"appliesTo": "all elements",
|
|
@@ -213,6 +236,7 @@
|
|
|
213
236
|
},
|
|
214
237
|
{
|
|
215
238
|
"name": "animation-range",
|
|
239
|
+
"href": "https://drafts.csswg.org/scroll-animations-1/#propdef-animation-range",
|
|
216
240
|
"value": "[ <'animation-range-start'> <'animation-range-end'>? ]#",
|
|
217
241
|
"initial": "see individual properties",
|
|
218
242
|
"appliesTo": "see individual properties",
|
|
@@ -228,6 +252,7 @@
|
|
|
228
252
|
},
|
|
229
253
|
{
|
|
230
254
|
"name": "animation-range-start",
|
|
255
|
+
"href": "https://drafts.csswg.org/scroll-animations-1/#propdef-animation-range-start",
|
|
231
256
|
"value": "[ normal | <length-percentage> | <timeline-range-name> <length-percentage>? ]#",
|
|
232
257
|
"initial": "normal",
|
|
233
258
|
"appliesTo": "all elements",
|
|
@@ -240,18 +265,21 @@
|
|
|
240
265
|
{
|
|
241
266
|
"name": "normal",
|
|
242
267
|
"prose": "The start of the animation’s attachment range is the start of its associated timeline; the start of the animation’s active interval is determined as normal.",
|
|
268
|
+
"href": "https://drafts.csswg.org/scroll-animations-1/#valdef-animation-range-start-normal",
|
|
243
269
|
"type": "value",
|
|
244
270
|
"value": "normal"
|
|
245
271
|
},
|
|
246
272
|
{
|
|
247
273
|
"name": "<length-percentage>",
|
|
248
274
|
"prose": "The animation attachment range starts at the specified point on the timeline measuring from the start of the timeline.",
|
|
275
|
+
"href": "https://drafts.csswg.org/scroll-animations-1/#valdef-animation-range-start-length-percentage",
|
|
249
276
|
"type": "value",
|
|
250
277
|
"value": "<length-percentage>"
|
|
251
278
|
},
|
|
252
279
|
{
|
|
253
280
|
"name": "<timeline-range-name> <length-percentage>?",
|
|
254
281
|
"prose": "The animation attachment range starts at the specified point on the timeline measuring from the start of the specified named timeline range. If the <length-percentage> is omitted, it defaults to 0%.",
|
|
282
|
+
"href": "https://drafts.csswg.org/scroll-animations-1/#valdef-animation-range-start-timeline-range-name-length-percentage",
|
|
255
283
|
"type": "value",
|
|
256
284
|
"value": "<timeline-range-name> <length-percentage>?"
|
|
257
285
|
}
|
|
@@ -263,6 +291,7 @@
|
|
|
263
291
|
},
|
|
264
292
|
{
|
|
265
293
|
"name": "animation-range-end",
|
|
294
|
+
"href": "https://drafts.csswg.org/scroll-animations-1/#propdef-animation-range-end",
|
|
266
295
|
"value": "[ normal | <length-percentage> | <timeline-range-name> <length-percentage>? ]#",
|
|
267
296
|
"initial": "normal",
|
|
268
297
|
"appliesTo": "all elements",
|
|
@@ -275,18 +304,21 @@
|
|
|
275
304
|
{
|
|
276
305
|
"name": "normal",
|
|
277
306
|
"prose": "The end of the animation’s attachment range is the end of its associated timeline; the end of the animation’s active interval is determined as normal.",
|
|
307
|
+
"href": "https://drafts.csswg.org/scroll-animations-1/#valdef-animation-range-end-normal",
|
|
278
308
|
"type": "value",
|
|
279
309
|
"value": "normal"
|
|
280
310
|
},
|
|
281
311
|
{
|
|
282
312
|
"name": "<length-percentage>",
|
|
283
313
|
"prose": "The animation attachment range ends at the specified point on the timeline measuring from the start of the timeline.",
|
|
314
|
+
"href": "https://drafts.csswg.org/scroll-animations-1/#valdef-animation-range-end-length-percentage",
|
|
284
315
|
"type": "value",
|
|
285
316
|
"value": "<length-percentage>"
|
|
286
317
|
},
|
|
287
318
|
{
|
|
288
319
|
"name": "<timeline-range-name> <length-percentage>?",
|
|
289
320
|
"prose": "The animation attachment range ends at the specified point on the timeline measuring from the start of the specified named timeline range. If the <length-percentage> is omitted, it defaults to 100%.",
|
|
321
|
+
"href": "https://drafts.csswg.org/scroll-animations-1/#valdef-animation-range-end-timeline-range-name-length-percentage",
|
|
290
322
|
"type": "value",
|
|
291
323
|
"value": "<timeline-range-name> <length-percentage>?"
|
|
292
324
|
}
|
|
@@ -298,6 +330,7 @@
|
|
|
298
330
|
},
|
|
299
331
|
{
|
|
300
332
|
"name": "timeline-scope",
|
|
333
|
+
"href": "https://drafts.csswg.org/scroll-animations-1/#propdef-timeline-scope",
|
|
301
334
|
"value": "none | all | <dashed-ident>#",
|
|
302
335
|
"initial": "none",
|
|
303
336
|
"appliesTo": "all elements",
|
|
@@ -310,18 +343,21 @@
|
|
|
310
343
|
{
|
|
311
344
|
"name": "none",
|
|
312
345
|
"prose": "No changes in timeline name scope.",
|
|
346
|
+
"href": "https://drafts.csswg.org/scroll-animations-1/#valdef-timeline-scope-none",
|
|
313
347
|
"type": "value",
|
|
314
348
|
"value": "none"
|
|
315
349
|
},
|
|
316
350
|
{
|
|
317
351
|
"name": "all",
|
|
318
352
|
"prose": "Declares the names of all timelines defined by descendants—whose scope is not already explicitly declared by a descendant using timeline-scope—to be in scope for this element and its descendants.",
|
|
353
|
+
"href": "https://drafts.csswg.org/scroll-animations-1/#valdef-timeline-scope-all",
|
|
319
354
|
"type": "value",
|
|
320
355
|
"value": "all"
|
|
321
356
|
},
|
|
322
357
|
{
|
|
323
358
|
"name": "<dashed-ident>",
|
|
324
359
|
"prose": "Declares the name of a matching named timeline defined by a descendant—whose scope is not already explicitly declared by a descendant using timeline-scope—to be in scope for this element and its descendants. If no such timeline exists, or if more than one such timeline exists, instead declares an inactive timeline with the specified name.",
|
|
360
|
+
"href": "https://drafts.csswg.org/scroll-animations-1/#valdef-timeline-scope-dashed-ident",
|
|
325
361
|
"type": "value",
|
|
326
362
|
"value": "<dashed-ident>"
|
|
327
363
|
}
|
|
@@ -338,48 +374,56 @@
|
|
|
338
374
|
{
|
|
339
375
|
"name": "scroll()",
|
|
340
376
|
"prose": "The scroll() functional notation can be used as a <single-animation-timeline> value in animation-timeline and specifies a scroll progress timeline. Its syntax is",
|
|
377
|
+
"href": "https://drafts.csswg.org/scroll-animations-1/#funcdef-scroll",
|
|
341
378
|
"type": "function",
|
|
342
379
|
"value": "scroll( [ <scroller> || <axis> ]? )",
|
|
343
380
|
"values": [
|
|
344
381
|
{
|
|
345
382
|
"name": "block",
|
|
346
383
|
"prose": "Specifies to use the measure of progress along the block axis of the scroll container. (Default.)",
|
|
384
|
+
"href": "https://drafts.csswg.org/scroll-animations-1/#valdef-scroll-block",
|
|
347
385
|
"type": "value",
|
|
348
386
|
"value": "block"
|
|
349
387
|
},
|
|
350
388
|
{
|
|
351
389
|
"name": "inline",
|
|
352
390
|
"prose": "Specifies to use the measure of progress along the inline axis of the scroll container.",
|
|
391
|
+
"href": "https://drafts.csswg.org/scroll-animations-1/#valdef-scroll-inline",
|
|
353
392
|
"type": "value",
|
|
354
393
|
"value": "inline"
|
|
355
394
|
},
|
|
356
395
|
{
|
|
357
396
|
"name": "x",
|
|
358
397
|
"prose": "Specifies to use the measure of progress along the horizontal axis of the scroll container.",
|
|
398
|
+
"href": "https://drafts.csswg.org/scroll-animations-1/#valdef-scroll-x",
|
|
359
399
|
"type": "value",
|
|
360
400
|
"value": "x"
|
|
361
401
|
},
|
|
362
402
|
{
|
|
363
403
|
"name": "y",
|
|
364
404
|
"prose": "Specifies to use the measure of progress along the vertical axis of the scroll container.",
|
|
405
|
+
"href": "https://drafts.csswg.org/scroll-animations-1/#valdef-scroll-y",
|
|
365
406
|
"type": "value",
|
|
366
407
|
"value": "y"
|
|
367
408
|
},
|
|
368
409
|
{
|
|
369
410
|
"name": "nearest",
|
|
370
411
|
"prose": "Specifies to use the nearest ancestor scroll container. (Default.)",
|
|
412
|
+
"href": "https://drafts.csswg.org/scroll-animations-1/#valdef-scroll-nearest",
|
|
371
413
|
"type": "value",
|
|
372
414
|
"value": "nearest"
|
|
373
415
|
},
|
|
374
416
|
{
|
|
375
417
|
"name": "root",
|
|
376
418
|
"prose": "Specifies to use the document viewport as the scroll container.",
|
|
419
|
+
"href": "https://drafts.csswg.org/scroll-animations-1/#valdef-scroll-root",
|
|
377
420
|
"type": "value",
|
|
378
421
|
"value": "root"
|
|
379
422
|
},
|
|
380
423
|
{
|
|
381
424
|
"name": "self",
|
|
382
425
|
"prose": "Specifies to use the element’s own principal box as the scroll container. If the principal box is not a scroll container, then the scroll progress timeline is inactive.",
|
|
426
|
+
"href": "https://drafts.csswg.org/scroll-animations-1/#valdef-scroll-self",
|
|
383
427
|
"type": "value",
|
|
384
428
|
"value": "self"
|
|
385
429
|
}
|
|
@@ -387,23 +431,27 @@
|
|
|
387
431
|
},
|
|
388
432
|
{
|
|
389
433
|
"name": "<axis>",
|
|
434
|
+
"href": "https://drafts.csswg.org/scroll-animations-1/#typedef-axis",
|
|
390
435
|
"type": "type",
|
|
391
436
|
"value": "block | inline | x | y"
|
|
392
437
|
},
|
|
393
438
|
{
|
|
394
439
|
"name": "<scroller>",
|
|
440
|
+
"href": "https://drafts.csswg.org/scroll-animations-1/#typedef-scroller",
|
|
395
441
|
"type": "type",
|
|
396
442
|
"value": "root | nearest | self"
|
|
397
443
|
},
|
|
398
444
|
{
|
|
399
445
|
"name": "view()",
|
|
400
446
|
"prose": "The view() functional notation can be used as a <single-animation-timeline> value in animation-timeline and specifies a view progress timeline in reference to the nearest ancestor scroll container. Its syntax is",
|
|
447
|
+
"href": "https://drafts.csswg.org/scroll-animations-1/#funcdef-view",
|
|
401
448
|
"type": "function",
|
|
402
449
|
"value": "view( [ <axis> || <'view-timeline-inset'> ]? )"
|
|
403
450
|
},
|
|
404
451
|
{
|
|
405
452
|
"name": "<timeline-range-name>",
|
|
406
453
|
"prose": "A named timeline range is a named segment of an animation timeline. The start of the segment is represented as 0% progress through the range; the end of the segment is represented as 100% progress through the range. Multiple named timeline ranges can be associated with a given timeline, and multiple such ranges can overlap. For example, the contain range of a view progress timeline overlaps with its cover range. Named timeline ranges are represented by the <timeline-range-name> value type, which indicates a CSS identifier representing one of the predefined named timeline ranges.",
|
|
454
|
+
"href": "https://drafts.csswg.org/scroll-animations-1/#typedef-timeline-range-name",
|
|
407
455
|
"type": "type"
|
|
408
456
|
}
|
|
409
457
|
],
|
|
@@ -417,6 +465,7 @@
|
|
|
417
465
|
"msg": "Dangling value",
|
|
418
466
|
"name": "cover",
|
|
419
467
|
"prose": "Represents the full range of the view progress timeline: 0% progress represents the latest position at which the start border edge of the element’s principal box coincides with the end edge of its view progress visibility range. 100% progress represents the earliest position at which the end border edge of the element’s principal box coincides with the start edge of its view progress visibility range.",
|
|
468
|
+
"href": "https://drafts.csswg.org/scroll-animations-1/#valdef-animation-timeline-range-cover",
|
|
420
469
|
"type": "value",
|
|
421
470
|
"value": "cover",
|
|
422
471
|
"for": "animation-timeline-range"
|
|
@@ -425,6 +474,7 @@
|
|
|
425
474
|
"msg": "Dangling value",
|
|
426
475
|
"name": "contain",
|
|
427
476
|
"prose": "Represents the range during which the principal box is either fully contained by, or fully covers, its view progress visibility range within the scrollport. 0% progress represents the earliest position at which either: the start border edge of the element’s principal box coincides with the start edge of its view progress visibility range. the end border edge of the element’s principal box coincides with the end edge of its view progress visibility range. 100% progress represents the latest position at which either: the start border edge of the element’s principal box coincides with the start edge of its view progress visibility range. the end border edge of the element’s principal box coincides with the end edge of its view progress visibility range.",
|
|
477
|
+
"href": "https://drafts.csswg.org/scroll-animations-1/#valdef-animation-timeline-range-contain",
|
|
428
478
|
"type": "value",
|
|
429
479
|
"value": "contain",
|
|
430
480
|
"for": "animation-timeline-range"
|
|
@@ -433,6 +483,7 @@
|
|
|
433
483
|
"msg": "Dangling value",
|
|
434
484
|
"name": "entry",
|
|
435
485
|
"prose": "Represents the range during which the principal box is entering the view progress visibility range. 0% is equivalent to 0% of the cover range. 100% is equivalent to 0% of the contain range.",
|
|
486
|
+
"href": "https://drafts.csswg.org/scroll-animations-1/#valdef-animation-timeline-range-entry",
|
|
436
487
|
"type": "value",
|
|
437
488
|
"value": "entry",
|
|
438
489
|
"for": "animation-timeline-range"
|
|
@@ -441,6 +492,7 @@
|
|
|
441
492
|
"msg": "Dangling value",
|
|
442
493
|
"name": "exit",
|
|
443
494
|
"prose": "Represents the range during which the principal box is exiting the view progress visibility range. 0% is equivalent to 100% of the contain range. 100% is equivalent to 100% of the cover range.",
|
|
495
|
+
"href": "https://drafts.csswg.org/scroll-animations-1/#valdef-animation-timeline-range-exit",
|
|
444
496
|
"type": "value",
|
|
445
497
|
"value": "exit",
|
|
446
498
|
"for": "animation-timeline-range"
|
|
@@ -449,6 +501,7 @@
|
|
|
449
501
|
"msg": "Dangling value",
|
|
450
502
|
"name": "entry-crossing",
|
|
451
503
|
"prose": "Represents the range during which the principal box crosses the end border edge 0% progress represents the latest position at which the start border edge of the element’s principal box coincides with the end edge of its view progress visibility range. 100% progress represents the earliest position at which the end border edge of the element’s principal box coincides with the end edge of its view progress visibility range.",
|
|
504
|
+
"href": "https://drafts.csswg.org/scroll-animations-1/#valdef-animation-timeline-range-entry-crossing",
|
|
452
505
|
"type": "value",
|
|
453
506
|
"value": "entry-crossing",
|
|
454
507
|
"for": "animation-timeline-range"
|
|
@@ -457,6 +510,7 @@
|
|
|
457
510
|
"msg": "Dangling value",
|
|
458
511
|
"name": "exit-crossing",
|
|
459
512
|
"prose": "Represents the range during which the principal box crosses the start border edge 0% progress represents the latest position at which the start border edge of the element’s principal box coincides with the start edge of its view progress visibility range. 100% progress represents the earliest position at which the end border edge of the element’s principal box coincides with the start edge of its view progress visibility range.",
|
|
513
|
+
"href": "https://drafts.csswg.org/scroll-animations-1/#valdef-animation-timeline-range-exit-crossing",
|
|
460
514
|
"type": "value",
|
|
461
515
|
"value": "exit-crossing",
|
|
462
516
|
"for": "animation-timeline-range"
|