@webref/css 4.2.3 → 4.3.2

package/css-transforms.json

@@ -51,8 +51,8 @@
   },
   "descriptors": {},
   "valuespaces": {
-    "<transform-list>": {
-      "value": "<transform-function>+"
+    "<transform-function>": {
+      "prose": "The value of the transform property is a list of <transform-function>. The set of allowed transform functions is given below. In the following functions, a <zero> behaves the same as 0deg (\"unitless 0\" angles are preserved for legacy compat). A percentage for horizontal translations is relative to the width of the reference box. A percentage for vertical translations is relative to the height of the reference box."
     },
     "<matrix()>": {
       "value": "matrix( <number>#{6} )"
@@ -86,6 +86,9 @@
     },
     "<skewY()>": {
       "value": "skewY( [ <angle> | <zero> ] )"
+    },
+    "<transform-list>": {
+      "value": "<transform-function>+"
     }
   }
 }

package/css-transitions.json

@@ -21,7 +21,7 @@
     },
     "transition-duration": {
       "name": "transition-duration",
-      "value": "<time>#",
+      "value": "<time [0s,∞]>#",
       "initial": "0s",
       "appliesTo": "all elements",
       "inherited": "no",

package/css-ui.json

@@ -288,17 +288,23 @@
   },
   "descriptors": {},
   "valuespaces": {
-    "<compat-auto>": {
-      "value": "searchfield | textarea | push-button | slider-horizontal | checkbox | radio | square-button | menulist | listbox | meter | progress-bar | button"
+    "<outline-line-style>": {
+      "prose": "<outline-line-style> accepts the same values as <line-style> (CSS Backgrounds 3 § 3.2 Line Patterns: the border-style properties) with the same meaning, except that hidden is not a legal outline style. In addition, the outline-style property accepts the value auto. The auto value permits the user agent to render a custom outline style, typically a style which is either a user interface default for the platform, or perhaps a style that is richer than can be described in detail in CSS, e.g. a rounded edge outline with semi-translucent outer pixels that appears to glow. As such, this specification does not define how the outline-color and outline-width are incorporated or used (if at all) when rendering auto style outlines. User agents may treat auto as solid."
     },
-    "<compat-special>": {
-      "value": "textfield | menulist-button"
+    "<url-set>": {
+      "prose": "<url-set> is a limited version of image-set(), where only <url> and <url-set> can be used in the part of the <image-set-option> sub-production which would normally allow <image>."
     },
     "<id>": {
       "prose": "The <id> value is an ID selector [SELECT]. In response to directional navigation input corresponding to the property, the focus is navigated to the first element in tree order matching the selector. If this refers to the currently focused element, the directional navigation input respective to the nav- property is ignored — there is no need to refocus the same element. If no element matches the selector, the user agent automatically determines which element to navigate the focus to. If the focus is navigated to an element that was not otherwise focusable, it becomes focusable only as the result of this directional navigation, and the :focus pseudo-class matches the element while it is focused as such."
     },
     "<target-name>": {
       "prose": "The <target-name> parameter indicates the target frame for the focus navigation. It is a <string> and it MUST NOT start with the underscore \"_\" character. Error handling: if it does start with an underscore, \"_parent\" navigates to the parent frame, \"_root\" is treated as root, and other values navigate to a frame by that name if it exists. If the specified target frame does not exist, the parameter will be treated as the keyword current, which means to simply use the frame that the element is in. The keyword root indicates that the user agent should target the full window."
+    },
+    "<compat-auto>": {
+      "value": "searchfield | textarea | push-button | slider-horizontal | checkbox | radio | square-button | menulist | listbox | meter | progress-bar | button"
+    },
+    "<compat-special>": {
+      "value": "textfield | menulist-button"
     }
   }
 }

package/css-values-5.json

@@ -6,9 +6,19 @@
   "properties": {},
   "descriptors": {},
   "valuespaces": {
+    "<toggle()>": {
+      "prose": "The toggle() expression allows descendant elements to cycle over a list of values instead of inheriting the same value."
+    },
+    "<toggle-value>": {
+      "prose": "where <toggle-value> is any CSS value that is valid where the expression is placed. If any of the values inside are not valid, then the entire toggle() expression is invalid. The toggle() expression may be used as the value of any property, but must be the only component in that property’s value."
+    },
     "<attr()>": {
+      "prose": "The attr() function substitutes the value of an attribute on an element into a property, similar to how the var() function substitutes a custom property value into a function.",
       "value": "attr( <q-name> <attr-type>? , <declaration-value>?)"
     },
+    "<dimension-unit>": {
+      "prose": "The <dimension-unit> production matches a literal \"%\" character (that is, a <delim-token> with a value of \"%\") or an ident whose value is any of the CSS units for <length>, <angle>, <time>, <frequency>, or <flex> values (such as px or ms)."
+    },
     "<attr-type>": {
       "value": "string | url | ident | color | number | percentage | length | angle | time | frequency | flex | <dimension-unit>"
     }

package/css-values.json

@@ -6,30 +6,90 @@
   "properties": {},
   "descriptors": {},
   "valuespaces": {
-    "<url>": {
-      "value": "url( <string> <url-modifier>* ) | src( <string> <url-modifier>* )"
+    "<mix()>": {
+      "prose": "Interpolation of two values can be represented by the mix() functional notation, whose syntax is defined as follows:"
+    },
+    "<start-value>": {
+      "prose": "The value at the “start” (0%) of the interpolation range."
+    },
+    "<end-value>": {
+      "prose": "The value at the “end” (100%) of the interpolation range."
+    },
+    "<ident>": {
+      "prose": "CSS identifiers, generically denoted by <ident>, consist of a sequence of characters conforming to the <ident-token> grammar. [CSS-SYNTAX-3] Identifiers cannot be quoted; otherwise they would be interpreted as strings. CSS properties accept two classes of identifiers: pre-defined keywords and author-defined identifiers."
+    },
+    "<custom-ident>": {
+      "prose": "Some properties accept arbitrary author-defined identifiers as a component value. This generic data type is denoted by <custom-ident>, and represents any valid CSS identifier that would not be misinterpreted as a pre-defined keyword in that property’s value definition. Such identifiers are fully case-sensitive (meaning they’re compared using the \"identical to\" operation), even in the ASCII range (e.g. example and EXAMPLE are two different, unrelated user-defined identifiers)."
+    },
+    "<dashed-ident>": {
+      "prose": "The <dashed-ident> production is a <custom-ident>, with all the case-sensitivity that implies, with the additional restriction that it must start with two dashes (U+002D HYPHEN-MINUS)."
+    },
+    "<url()>": {
+      "prose": "Typically, a <url> is written with the url() or src() functional notations:"
+    },
+    "<src()>": {
+      "prose": "Typically, a <url> is written with the url() or src() functional notations:"
+    },
+    "<url-modifier>": {
+      "prose": "The url() function supports specifying additional <url-modifier>s, which change the meaning or the interpretation of the URL somehow. A <url-modifier> is either an <ident> or a functional notation."
+    },
+    "<zero>": {
+      "prose": "The value <zero> represents a literal number with the value 0. Expressions that merely evaluate to a <number> with the value 0 (for example, calc(0)) do not match <zero>; only literal <number-token>s do."
+    },
+    "<dimension>": {
+      "prose": "The general term dimension refers to a number with a unit attached to it; and is denoted by <dimension>."
+    },
+    "<length-percentage>": {
+      "value": "[ <length> | <percentage> ]"
+    },
+    "<frequency-percentage>": {
+      "value": "[ <frequency> | <percentage> ]"
+    },
+    "<angle-percentage>": {
+      "value": "[ <angle> | <percentage> ]"
+    },
+    "<time-percentage>": {
+      "value": "[ <time> | <percentage> ]"
     },
     "<ratio>": {
+      "prose": "Ratio values are denoted by <ratio>, and represent the ratio of two numeric values. It most often represents an aspect ratio, relating a width (first) to a height (second).",
       "value": "<number [0,∞]> [ / <number [0,∞]> ]?"
     },
-    "<position>": {
-      "value": "[ [ left | center | right ] || [ top | center | bottom ] | [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ]? | [ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ] ]"
+    "<angle>": {
+      "prose": "Angle values are <dimension>s denoted by <angle>. The angle unit identifiers are:"
+    },
+    "<time>": {
+      "prose": "Time values are dimensions denoted by <time>. The time unit identifiers are:"
+    },
+    "<frequency>": {
+      "prose": "Frequency values are dimensions denoted by <frequency>. The frequency unit identifiers are:"
+    },
+    "<resolution>": {
+      "prose": "Resolution units are dimensions denoted by <resolution>. The resolution unit identifiers are:"
     },
     "<calc()>": {
+      "prose": "The calc() function is a math function that allows basic arithmetic to be performed on numerical values, using addition (+), subtraction (-), multiplication (*), division (/), and parentheses.",
       "value": "calc( <calc-sum> )"
     },
     "<min()>": {
+      "prose": "The min() or max() functions contain one or more comma-separated calculations, and represent the smallest (most negative) or largest (most positive) of them, respectively.",
       "value": "min( <calc-sum># )"
     },
     "<max()>": {
+      "prose": "The min() or max() functions contain one or more comma-separated calculations, and represent the smallest (most negative) or largest (most positive) of them, respectively.",
       "value": "max( <calc-sum># )"
     },
     "<clamp()>": {
+      "prose": "The clamp() function takes three calculations—a minimum value, a central value, and a maximum value—and represents its central calculation, clamped according to its min and max calculations, favoring the min calculation if it conflicts with the max. (That is, given clamp(MIN, VAL, MAX), it represents exactly the same value as max(MIN, min(VAL, MAX))).",
       "value": "clamp( <calc-sum>#{3} )"
     },
     "<round()>": {
       "value": "round( <rounding-strategy>?, <calc-sum>, <calc-sum> )"
     },
+    "<rounding-strategy>": {
+      "prose": "If A is exactly equal to an integer multiple of B, round() resolves to A exactly (preserving whether A is 0⁻ or 0⁺, if relevant). Otherwise, there are two integer multiples of B that are potentially \"closest\" to A, lower B which is closer to −∞ and upper B which is closer to +∞. The following <rounding-strategy>s dictate how to choose between them:",
+      "value": "nearest | up | down | to-zero"
+    },
     "<mod()>": {
       "value": "mod( <calc-sum>, <calc-sum> )"
     },
@@ -78,6 +138,9 @@
     "<sign()>": {
       "value": "sign( <calc-sum> )"
     },
+    "<quirky-length>": {
+      "prose": "When CSS is being parsed in quirks mode, <quirky-length> is a type of <length> that is only valid in certain properties:"
+    },
     "<calc-sum>": {
       "value": "<calc-product> [ [ '+' | '-' ] <calc-product> ]*"
     },
@@ -89,27 +152,6 @@
     },
     "<calc-constant>": {
       "value": "e | pi | infinity | -infinity | NaN"
-    },
-    "<rounding-strategy>": {
-      "value": "nearest | up | down | to-zero"
-    },
-    "<start-value>": {
-      "prose": "The value at the “start” (0%) of the interpolation range."
-    },
-    "<end-value>": {
-      "prose": "The value at the “end” (100%) of the interpolation range."
-    },
-    "<length-percentage>": {
-      "value": "[ <length> | <percentage> ]"
-    },
-    "<frequency-percentage>": {
-      "value": "[ <frequency> | <percentage> ]"
-    },
-    "<angle-percentage>": {
-      "value": "[ <angle> | <percentage> ]"
-    },
-    "<time-percentage>": {
-      "value": "[ <time> | <percentage> ]"
     }
   }
 }

package/css-variables.json

@@ -6,6 +6,9 @@
   "properties": {},
   "descriptors": {},
   "valuespaces": {
+    "<custom-property-name>": {
+      "prose": "A custom property is any property whose name starts with two dashes (U+002D HYPHEN-MINUS), like --foo. The <custom-property-name> production corresponds to this: it’s defined as any <dashed-ident> (a valid identifier that starts with two dashes), except -- itself, which is reserved for future use by CSS. Custom properties are solely for use by authors and users; CSS will never give them a meaning beyond what is presented here."
+    },
     "<var()>": {
       "value": "var( <custom-property-name> , <declaration-value>? )"
     }

package/css-writing-modes.json

@@ -80,7 +80,7 @@
     },
     "text-combine-upright": {
       "name": "text-combine-upright",
-      "value": "none | all | [ digits <integer>? ]",
+      "value": "none | all | [ digits <integer [2,4]>? ]",
       "initial": "none",
       "appliesTo": "inline boxes and text",
       "inherited": "yes",

package/fill-stroke.json

@@ -428,9 +428,6 @@
     },
     "<svg-paint>": {
       "value": "child | child( <integer> )"
-    },
-    "<child()>": {
-      "value": "child(<integer>)"
     }
   }
 }

package/filter-effects.json

@@ -86,6 +86,12 @@
   },
   "descriptors": {},
   "valuespaces": {
+    "<url>": {
+      "prose": "A filter reference to a filter element. For example url(commonfilters.svg#filter). If the filter references a non-existent object or the referenced object is not a filter element, then the whole filter chain is ignored. No filter is applied to the object."
+    },
+    "<number-optional-number>": {
+      "value": "<number> <number>?"
+    },
     "<filter-value-list>": {
       "value": "[ <filter-function> | <url> ]+"
     },
@@ -124,12 +130,6 @@
     },
     "<filter()>": {
       "value": "filter( [ <image> | <string> ], <filter-value-list> )"
-    },
-    "<number-optional-number>": {
-      "value": "<number> <number>?"
-    },
-    "<url>": {
-      "prose": "A filter reference to a filter element. For example url(commonfilters.svg#filter). If the filter references a non-existent object or the referenced object is not a filter element, then the whole filter chain is ignored. No filter is applied to the object."
     }
   }
 }

package/mediaqueries-5.json

@@ -303,6 +303,12 @@
     ]
   },
   "valuespaces": {
+    "<media-query-list>": {
+      "prose": "To parse a <media-query-list> production, parse a comma-separated list of component values, then parse each entry in the returned list as a <media-query>. Its value is the list of <media-query>s so produced."
+    },
+    "<mq-boolean>": {
+      "prose": "The <mq-boolean> value type is an <integer> with the value 0 or 1. Any other integer value is invalid. Note that -0 is always equivalent to 0 in CSS, and so is also accepted as a valid <mq-boolean> value."
+    },
     "<media-query>": {
       "value": "<media-condition> | [ not | only ]? <media-type> [ and <media-condition-without-or> ]?"
     },

package/mediaqueries.json

@@ -175,6 +175,13 @@
     ]
   },
   "valuespaces": {
+    "<media-query-list>": {
+      "prose": "To parse a <media-query-list> production, parse a comma-separated list of component values, then parse each entry in the returned list as a <media-query>. Its value is the list of <media-query>s so produced."
+    },
+    "<mq-boolean>": {
+      "prose": "The <mq-boolean> value type is an <integer> with the value 0 or 1. Any other integer value is invalid. Note that -0 is always equivalent to 0 in CSS, and so is also accepted as a valid <mq-boolean> value.",
+      "value": "<integer [0,1]>"
+    },
     "<media-query>": {
       "value": "<media-condition> | [ not | only ]? <media-type> [ and <media-condition-without-or> ]?"
     },

package/motion.json

@@ -106,9 +106,6 @@
     },
     "<path()>": {
       "value": "path( <string> )"
-    },
-    "<size>": {
-      "prose": "Decides the path length used when offset-distance is expressed as a percentage, using the distance to the containing box. For <size> values other than sides, the path length is independent of <angle>. It is defined as: <size> = [ closest-side | closest-corner | farthest-side | farthest-corner | sides ]"
     }
   }
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@webref/css",
   "description": "CSS definitions of the web platform",
-  "version": "4.2.3",
+  "version": "4.3.2",
   "repository": {
     "type": "git",
     "url": "https://github.com/w3c/webref.git"

package/scroll-animations.json

@@ -39,9 +39,6 @@
     },
     "<element-offset-edge>": {
       "value": "start | end"
-    },
-    "<selector()>": {
-      "value": "selector()"
     }
   }
 }

package/selectors.json

@@ -6,6 +6,12 @@
   "properties": {},
   "descriptors": {},
   "valuespaces": {
+    "<forgiving-selector-list>": {
+      "prose": "The <forgiving-selector-list> production instead parses each selector in the list individually, simply ignoring ones that fail to parse, so the remaining selectors can still be used."
+    },
+    "<forgiving-relative-selector-list>": {
+      "prose": "<forgiving-relative-selector-list> is identical to <forgiving-selector-list>, except it parses its components as <relative-selector> rather than <complex-selector>."
+    },
     "<selector-list>": {
       "value": "<complex-selector-list>"
     },

package/css-layout-api.json

@@ -1,13 +0,0 @@
-{
-  "spec": {
-    "title": "CSS Layout API Level 1",
-    "url": "https://drafts.css-houdini.org/css-layout-api-1/"
-  },
-  "properties": {},
-  "descriptors": {},
-  "valuespaces": {
-    "<layout()>": {
-      "value": "layout()"
-    }
-  }
-}

package/svg-animations.json

@@ -1,13 +0,0 @@
-{
-  "spec": {
-    "title": "SVG Animations",
-    "url": "https://svgwg.org/specs/animations/"
-  },
-  "properties": {},
-  "descriptors": {},
-  "valuespaces": {
-    "<control-point>": {
-      "value": "<number> ,? <number> ,? <number> ,? <number>"
-    }
-  }
-}