@webref/css 5.4.4 → 6.1.0

package/css-anchor.json

@@ -3,8 +3,8 @@
     "title": "CSS Anchor Positioning",
     "url": "https://drafts.csswg.org/css-anchor-1/"
   },
-  "properties": {
-    "anchor-scroll": {
+  "properties": [
+    {
       "name": "anchor-scroll",
       "value": "none | <dashed-ident>",
       "initial": "none",
@@ -14,12 +14,32 @@
       "computedValue": "as specified",
       "canonicalOrder": "per grammar",
       "animationType": "discrete",
+      "values": [
+        {
+          "name": "none",
+          "prose": "No effect.",
+          "type": "value",
+          "value": "none"
+        },
+        {
+          "name": "<dashed-ident>",
+          "prose": "The scroll offsets of the target anchor element with the name given by the <dashed-ident> will be compensated for in positioning and fallback.",
+          "type": "value",
+          "value": "<dashed-ident>"
+        },
+        {
+          "name": "implicit",
+          "prose": "The scroll offsets of the implicit anchor element will be compensated for in positioning and fallback.",
+          "type": "value",
+          "value": "implicit"
+        }
+      ],
       "styleDeclaration": [
         "anchor-scroll",
         "anchorScroll"
       ]
     },
-    "anchor-name": {
+    {
       "name": "anchor-name",
       "value": "none | <dashed-ident>",
       "initial": "none",
@@ -29,12 +49,26 @@
       "computedValue": "as specified",
       "canonicalOrder": "per grammar",
       "animationType": "discrete",
+      "values": [
+        {
+          "name": "none",
+          "prose": "The property has no effect.",
+          "type": "value",
+          "value": "none"
+        },
+        {
+          "name": "<dashed-ident>",
+          "prose": "If the element generates a principal box, the element is an anchor element, with an anchor name equal to the <dashed-ident>. The anchor name is a tree-scoped name. Otherwise, the property has no effect.",
+          "type": "value",
+          "value": "<dashed-ident>"
+        }
+      ],
       "styleDeclaration": [
         "anchor-name",
         "anchorName"
       ]
     },
-    "position-fallback": {
+    {
       "name": "position-fallback",
       "value": "none | <dashed-ident>",
       "initial": "none",
@@ -44,32 +78,156 @@
       "computedValue": "as specified",
       "canonicalOrder": "per grammar",
       "animationType": "discrete",
+      "values": [
+        {
+          "name": "none",
+          "prose": "The property has no effect; the element does not use a position fallback list.",
+          "type": "value",
+          "value": "none"
+        },
+        {
+          "name": "<dashed-ident>",
+          "prose": "If there is a @position-fallback rule with a name matching the specified ident, then the element uses that position fallback list. Otherwise, this value has no effect.",
+          "type": "value",
+          "value": "<dashed-ident>"
+        }
+      ],
       "styleDeclaration": [
         "position-fallback",
         "positionFallback"
       ]
     }
-  },
-  "atrules": {
-    "@position-fallback": {
-      "value": "@position-fallback <dashed-ident> { <rule-list> } @try { <declaration-list> }",
+  ],
+  "atrules": [
+    {
+      "name": "@position-fallback",
+      "prose": "The @position-fallback rule defines a position fallback list with a given name, specifying one or more sets of positioning properties inside of @try blocks that will be applied to an element, with each successive one serving as fallback if the previous would cause the element to partially or fully overflow its containing block.",
+      "descriptors": [],
+      "value": "@position-fallback <dashed-ident> { <rule-list> } @try { <declaration-list> }"
+    },
+    {
+      "name": "@try",
+      "prose": "The @position-fallback rule defines a position fallback list with a given name, specifying one or more sets of positioning properties inside of @try blocks that will be applied to an element, with each successive one serving as fallback if the previous would cause the element to partially or fully overflow its containing block.",
       "descriptors": []
     }
-  },
-  "valuespaces": {
-    "<anchor()>": {
+  ],
+  "selectors": [],
+  "values": [
+    {
+      "name": "anchor()",
       "prose": "An absolutely-positioned element can use the anchor() function as a value in its inset properties to refer to the position of one or more anchor elements. The anchor() function resolves to a <length>.",
-      "value": "anchor( <dashed-ident>? <anchor-side>, <length-percentage>? )"
-    },
-    "<anchor-size()>": {
-      "prose": "An absolutely-positioned element can use the anchor-size() function in its sizing properties to refer to the size of one or more anchor elements. The anchor-size() function resolves to a <length>.",
-      "value": "anchor( <dashed-ident>? <anchor-size>, <length-percentage>? )"
+      "type": "function",
+      "value": "anchor( <dashed-ident>? <anchor-side>, <length-percentage>? )",
+      "values": [
+        {
+          "name": "left",
+          "prose": "The physical <anchor-side> keywords (left, right, top, and bottom) are only useful in inset properties corresponding to their corresponding axis: for example, using top and bottom in left or right (or in inset-inline-start if the inline axis is horizontal, etc) results in an invalid anchor query.",
+          "type": "value",
+          "value": "left"
+        },
+        {
+          "name": "right",
+          "prose": "The physical <anchor-side> keywords (left, right, top, and bottom) are only useful in inset properties corresponding to their corresponding axis: for example, using top and bottom in left or right (or in inset-inline-start if the inline axis is horizontal, etc) results in an invalid anchor query.",
+          "type": "value",
+          "value": "right"
+        },
+        {
+          "name": "top",
+          "prose": "The physical <anchor-side> keywords (left, right, top, and bottom) are only useful in inset properties corresponding to their corresponding axis: for example, using top and bottom in left or right (or in inset-inline-start if the inline axis is horizontal, etc) results in an invalid anchor query.",
+          "type": "value",
+          "value": "top"
+        },
+        {
+          "name": "bottom",
+          "prose": "The physical <anchor-side> keywords (left, right, top, and bottom) are only useful in inset properties corresponding to their corresponding axis: for example, using top and bottom in left or right (or in inset-inline-start if the inline axis is horizontal, etc) results in an invalid anchor query.",
+          "type": "value",
+          "value": "bottom"
+        },
+        {
+          "name": "start",
+          "prose": "The logical <anchor-side> keywords (start, end, self-start, and self-end) map to one of the physical keywords depending on the property the function is being used in (top or bottom in the top or bottom properties, etc) and the writing mode of either the element (for self-start and self-end) or the writing mode of the element’s containing block (for start and end).",
+          "type": "value",
+          "value": "start"
+        },
+        {
+          "name": "end",
+          "prose": "The logical <anchor-side> keywords (start, end, self-start, and self-end) map to one of the physical keywords depending on the property the function is being used in (top or bottom in the top or bottom properties, etc) and the writing mode of either the element (for self-start and self-end) or the writing mode of the element’s containing block (for start and end).",
+          "type": "value",
+          "value": "end"
+        },
+        {
+          "name": "self-start",
+          "prose": "The logical <anchor-side> keywords (start, end, self-start, and self-end) map to one of the physical keywords depending on the property the function is being used in (top or bottom in the top or bottom properties, etc) and the writing mode of either the element (for self-start and self-end) or the writing mode of the element’s containing block (for start and end).",
+          "type": "value",
+          "value": "self-start"
+        },
+        {
+          "name": "self-end",
+          "prose": "The logical <anchor-side> keywords (start, end, self-start, and self-end) map to one of the physical keywords depending on the property the function is being used in (top or bottom in the top or bottom properties, etc) and the writing mode of either the element (for self-start and self-end) or the writing mode of the element’s containing block (for start and end).",
+          "type": "value",
+          "value": "self-end"
+        },
+        {
+          "name": "center",
+          "prose": "A <percentage> value refers to a position a corresponding percentage between the start and end sides, with 0% being equivalent to start and 100% being equivalent to end. The center keyword is equivalent to 50%.",
+          "type": "value",
+          "value": "center"
+        }
+      ]
     },
-    "<anchor-side>": {
+    {
+      "name": "<anchor-side>",
+      "type": "type",
       "value": "top | left | right | bottom | start | end | self-start | self-end | <percentage> | center"
     },
-    "<anchor-size>": {
+    {
+      "name": "anchor-size()",
+      "prose": "An absolutely-positioned element can use the anchor-size() function in its sizing properties to refer to the size of one or more anchor elements. The anchor-size() function resolves to a <length>.",
+      "type": "function",
+      "value": "anchor( <dashed-ident>? <anchor-size>, <length-percentage>? )",
+      "values": [
+        {
+          "name": "width",
+          "prose": "The physical <anchor-size> keywords (width and height) refer to the width and height, respectively, of the target anchor element. Unlike anchor(), there is no restriction on having to match axises; for example, width: anchor-size(--foo height); is valid.",
+          "type": "value",
+          "value": "width"
+        },
+        {
+          "name": "height",
+          "prose": "The physical <anchor-size> keywords (width and height) refer to the width and height, respectively, of the target anchor element. Unlike anchor(), there is no restriction on having to match axises; for example, width: anchor-size(--foo height); is valid.",
+          "type": "value",
+          "value": "height"
+        },
+        {
+          "name": "block",
+          "prose": "The logical <anchor-size> keywords (block, inline, self-block, and self-inline) map to one of the physical keywords according to either the writing mode of the element (for self-block and self-inline) or the writing mode of the element’s containing block (for block and inline).",
+          "type": "value",
+          "value": "block"
+        },
+        {
+          "name": "inline",
+          "prose": "The logical <anchor-size> keywords (block, inline, self-block, and self-inline) map to one of the physical keywords according to either the writing mode of the element (for self-block and self-inline) or the writing mode of the element’s containing block (for block and inline).",
+          "type": "value",
+          "value": "inline"
+        },
+        {
+          "name": "self-block",
+          "prose": "The logical <anchor-size> keywords (block, inline, self-block, and self-inline) map to one of the physical keywords according to either the writing mode of the element (for self-block and self-inline) or the writing mode of the element’s containing block (for block and inline).",
+          "type": "value",
+          "value": "self-block"
+        },
+        {
+          "name": "self-inline",
+          "prose": "The logical <anchor-size> keywords (block, inline, self-block, and self-inline) map to one of the physical keywords according to either the writing mode of the element (for self-block and self-inline) or the writing mode of the element’s containing block (for block and inline).",
+          "type": "value",
+          "value": "self-inline"
+        }
+      ]
+    },
+    {
+      "name": "<anchor-size>",
+      "type": "type",
       "value": "width | height | block | inline | self-block | self-inline"
     }
-  }
+  ]
 }

package/css-animations-2.json

@@ -3,8 +3,8 @@
     "title": "CSS Animations Level 2",
     "url": "https://drafts.csswg.org/css-animations-2/"
   },
-  "properties": {
-    "animation-composition": {
+  "properties": [
+    {
       "name": "animation-composition",
       "value": "<single-animation-composition>#",
       "initial": "replace",
@@ -19,7 +19,7 @@
         "animationComposition"
       ]
     },
-    "animation-timeline": {
+    {
       "name": "animation-timeline",
       "value": "<single-animation-timeline>#",
       "initial": "auto",
@@ -34,20 +34,42 @@
         "animationTimeline"
       ]
     }
-  },
-  "atrules": {},
-  "valuespaces": {
-    "<single-animation-composition>": {
-      "value": "replace | add | accumulate"
+  ],
+  "atrules": [],
+  "selectors": [],
+  "values": [
+    {
+      "name": "<single-animation-composition>",
+      "value": "replace | add | accumulate",
+      "type": "type"
     },
-    "<timeline-name>": {
-      "value": "<custom-ident> | <string>"
+    {
+      "name": "<single-animation-timeline>",
+      "type": "type",
+      "value": "auto | none | <timeline-name>",
+      "values": [
+        {
+          "name": "auto",
+          "value": "auto",
+          "type": "value"
+        },
+        {
+          "name": "none",
+          "prose": "The animation is not associated with a timeline.",
+          "type": "value",
+          "value": "none"
+        }
+      ]
     },
-    "<single-animation>": {
-      "value": "<time> || <easing-function> || <time> || <single-animation-iteration-count> || <single-animation-direction> || <single-animation-fill-mode> || <single-animation-play-state> || [ none | <keyframes-name> ] || <single-animation-timeline>"
+    {
+      "name": "<timeline-name>",
+      "value": "<custom-ident> | <string>",
+      "type": "type"
     },
-    "<single-animation-timeline>": {
-      "value": "auto | none | <timeline-name>"
+    {
+      "name": "<single-animation>",
+      "value": "<time> || <easing-function> || <time> || <single-animation-iteration-count> || <single-animation-direction> || <single-animation-fill-mode> || <single-animation-play-state> || [ none | <keyframes-name> ] || <single-animation-timeline>",
+      "type": "type"
     }
-  }
+  ]
 }

package/css-animations.json

@@ -3,8 +3,8 @@
     "title": "CSS Animations Level 1",
     "url": "https://drafts.csswg.org/css-animations-1/"
   },
-  "properties": {
-    "animation-name": {
+  "properties": [
+    {
       "name": "animation-name",
       "value": "[ none | <keyframes-name> ]#",
       "initial": "none",
@@ -14,12 +14,26 @@
       "computedValue": "list, each item either a case-sensitive css identifier or the keyword none",
       "canonicalOrder": "per grammar",
       "animationType": "not animatable",
+      "values": [
+        {
+          "name": "none",
+          "prose": "No keyframes are specified at all, so there will be no animation. Any other animations properties specified for this animation have no effect.",
+          "type": "value",
+          "value": "none"
+        },
+        {
+          "name": "<keyframes-name>",
+          "prose": "The animation will use the keyframes with the name specified by the <keyframes-name>, if they exist. If no @keyframes rule with that name exists, there is no animation.",
+          "type": "value",
+          "value": "<keyframes-name>"
+        }
+      ],
       "styleDeclaration": [
         "animation-name",
         "animationName"
       ]
     },
-    "animation-duration": {
+    {
       "name": "animation-duration",
       "value": "<time [0s,∞]>#",
       "initial": "0s",
@@ -29,12 +43,20 @@
       "computedValue": "list, each item a duration",
       "canonicalOrder": "per grammar",
       "animationType": "not animatable",
+      "values": [
+        {
+          "name": "<time [0s,∞]>",
+          "prose": "The <time> specifies the length of time that an animation takes to complete one cycle. A negative <time> is invalid. If the <time> is 0s, like the initial value, the keyframes of the animation have no effect, but the animation itself still occurs instantaneously. Specifically, start and end events are fired; if animation-fill-mode is set to backwards or both, the first frame of the animation, as defined by animation-direction, will be displayed during the animation-delay. After the animation-delay the last frame of the animation, as defined by animation-direction, will be displayed if animation-fill-mode is set to forwards or both. If animation-fill-mode is set to none the animation will have no visible effect.",
+          "type": "value",
+          "value": "<time [0s,∞]>"
+        }
+      ],
       "styleDeclaration": [
         "animation-duration",
         "animationDuration"
       ]
     },
-    "animation-timing-function": {
+    {
       "name": "animation-timing-function",
       "value": "<easing-function>#",
       "initial": "ease",
@@ -49,7 +71,7 @@
         "animationTimingFunction"
       ]
     },
-    "animation-iteration-count": {
+    {
       "name": "animation-iteration-count",
       "value": "<single-animation-iteration-count>#",
       "initial": "1",
@@ -59,12 +81,26 @@
       "computedValue": "list, each item either a number or the keyword infinite",
       "canonicalOrder": "per grammar",
       "animationType": "not animatable",
+      "values": [
+        {
+          "name": "infinite",
+          "prose": "The animation will repeat forever.",
+          "type": "value",
+          "value": "infinite"
+        },
+        {
+          "name": "<number [0,∞]>",
+          "prose": "The animation will repeat the specified number of times. If the number is not an integer, the animation will end partway through its last cycle. Negative numbers are invalid. A value of 0 is valid and, similar to an animation-duration of 0s, causes the animation to occur instantaneously.",
+          "type": "value",
+          "value": "<number [0,∞]>"
+        }
+      ],
       "styleDeclaration": [
         "animation-iteration-count",
         "animationIterationCount"
       ]
     },
-    "animation-direction": {
+    {
       "name": "animation-direction",
       "value": "<single-animation-direction>#",
       "initial": "normal",
@@ -74,12 +110,38 @@
       "computedValue": "list, each item a keyword as specified",
       "canonicalOrder": "per grammar",
       "animationType": "not animatable",
+      "values": [
+        {
+          "name": "normal",
+          "prose": "All iterations of the animation are played as specified.",
+          "type": "value",
+          "value": "normal"
+        },
+        {
+          "name": "reverse",
+          "prose": "All iterations of the animation are played in the reverse direction from the way they were specified.",
+          "type": "value",
+          "value": "reverse"
+        },
+        {
+          "name": "alternate",
+          "prose": "The animation cycle iterations that are odd counts are played in the normal direction, and the animation cycle iterations that are even counts are played in a reverse direction.",
+          "type": "value",
+          "value": "alternate"
+        },
+        {
+          "name": "alternate-reverse",
+          "prose": "The animation cycle iterations that are odd counts are played in the reverse direction, and the animation cycle iterations that are even counts are played in a normal direction.",
+          "type": "value",
+          "value": "alternate-reverse"
+        }
+      ],
       "styleDeclaration": [
         "animation-direction",
         "animationDirection"
       ]
     },
-    "animation-play-state": {
+    {
       "name": "animation-play-state",
       "value": "<single-animation-play-state>#",
       "initial": "running",
@@ -89,12 +151,26 @@
       "computedValue": "list, each item a keyword as specified",
       "canonicalOrder": "per grammar",
       "animationType": "not animatable",
+      "values": [
+        {
+          "name": "running",
+          "prose": "While this property is set to running, the animation proceeds as normal.",
+          "type": "value",
+          "value": "running"
+        },
+        {
+          "name": "paused",
+          "prose": "While this property is set to paused, the animation is paused. The animation continues to apply to the element with the progress it had made before being paused. When unpaused (set back to running), it restarts from where it left off, as if the \"clock\" that controls the animation had stopped and started again. If the property is set to paused during the delay phase of the animation, the delay clock is also paused and resumes as soon as animation-play-state is set back to running.",
+          "type": "value",
+          "value": "paused"
+        }
+      ],
       "styleDeclaration": [
         "animation-play-state",
         "animationPlayState"
       ]
     },
-    "animation-fill-mode": {
+    {
       "name": "animation-fill-mode",
       "value": "<single-animation-fill-mode>#",
       "initial": "none",
@@ -104,12 +180,38 @@
       "computedValue": "list, each item a keyword as specified",
       "canonicalOrder": "per grammar",
       "animationType": "not animatable",
+      "values": [
+        {
+          "name": "none",
+          "prose": "The animation has no effect when it is applied but not executing.",
+          "type": "value",
+          "value": "none"
+        },
+        {
+          "name": "forwards",
+          "prose": "After the animation ends (as determined by its animation-iteration-count), the animation will apply the property values for the time the animation ended. When animation-iteration-count is an integer greater than zero, the values applied will be those for the end of the last completed iteration of the animation (rather than the values for the start of the iteration that would be next). When animation-iteration-count is zero, the values applied will be those that would start the first iteration (just as when animation-fill-mode is backwards).",
+          "type": "value",
+          "value": "forwards"
+        },
+        {
+          "name": "backwards",
+          "prose": "During the period defined by animation-delay, the animation will apply the property values defined in the keyframe that will start the first iteration of the animation. These are either the values of the from keyframe (when animation-direction is normal or alternate) or those of the to keyframe (when animation-direction is reverse or alternate-reverse).",
+          "type": "value",
+          "value": "backwards"
+        },
+        {
+          "name": "both",
+          "prose": "The effects of both forwards and backwards fill apply.",
+          "type": "value",
+          "value": "both"
+        }
+      ],
       "styleDeclaration": [
         "animation-fill-mode",
         "animationFillMode"
       ]
     },
-    "animation": {
+    {
       "name": "animation",
       "value": "<single-animation>#",
       "initial": "see individual properties",
@@ -123,34 +225,56 @@
         "animation"
       ]
     }
-  },
-  "atrules": {
-    "@keyframes": {
-      "value": "@keyframes <keyframes-name> { <rule-list> }",
-      "descriptors": []
+  ],
+  "atrules": [
+    {
+      "name": "@keyframes",
+      "prose": "Keyframes are specified using the @keyframes at-rule, defined as follows:",
+      "descriptors": [],
+      "value": "@keyframes <keyframes-name> { <rule-list> }"
     }
-  },
-  "valuespaces": {
-    "<single-animation-iteration-count>": {
-      "value": "infinite | <number [0,∞]>"
+  ],
+  "selectors": [],
+  "values": [
+    {
+      "name": "<keyframes-name>",
+      "type": "type",
+      "value": "<custom-ident> | <string>"
     },
-    "<single-animation-direction>": {
-      "value": "normal | reverse | alternate | alternate-reverse"
+    {
+      "name": "<keyframe-block>",
+      "type": "type",
+      "value": "<keyframe-selector># { <declaration-list> }"
     },
-    "<single-animation-play-state>": {
-      "value": "running | paused"
+    {
+      "name": "<keyframe-selector>",
+      "type": "type",
+      "value": "from | to | <percentage [0,100]>"
     },
-    "<single-animation-fill-mode>": {
-      "value": "none | forwards | backwards | both"
+    {
+      "name": "<single-animation-iteration-count>",
+      "value": "infinite | <number [0,∞]>",
+      "type": "type"
     },
-    "<single-animation>": {
-      "value": "<time> || <easing-function> || <time> || <single-animation-iteration-count> || <single-animation-direction> || <single-animation-fill-mode> || <single-animation-play-state> || [ none | <keyframes-name> ]"
+    {
+      "name": "<single-animation-direction>",
+      "value": "normal | reverse | alternate | alternate-reverse",
+      "type": "type"
     },
-    "<keyframes-name>": {
-      "value": "<custom-ident> | <string>"
+    {
+      "name": "<single-animation-play-state>",
+      "value": "running | paused",
+      "type": "type"
     },
-    "<keyframe-block>": {
-      "value": "<keyframe-selector># { <declaration-list> }"
+    {
+      "name": "<single-animation-fill-mode>",
+      "value": "none | forwards | backwards | both",
+      "type": "type"
+    },
+    {
+      "name": "<single-animation>",
+      "value": "<time> || <easing-function> || <time> || <single-animation-iteration-count> || <single-animation-direction> || <single-animation-fill-mode> || <single-animation-play-state> || [ none | <keyframes-name> ]",
+      "type": "type"
     }
-  }
+  ]
 }