@webref/css 6.3.1 → 6.3.3

package/css-anchor.json

@@ -68,6 +68,21 @@
         "anchorName"
       ]
     },
+    {
+      "name": "anchor-default",
+      "value": "<anchor-element>",
+      "initial": "implicit",
+      "appliesTo": "absolutely positioned elements",
+      "inherited": "no",
+      "percentages": "n/a",
+      "computedValue": "as specified",
+      "canonicalOrder": "per grammar",
+      "animationType": "discrete",
+      "styleDeclaration": [
+        "anchor-default",
+        "anchorDefault"
+      ]
+    },
     {
       "name": "position-fallback",
       "value": "none | <dashed-ident>",
@@ -117,8 +132,32 @@
       "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>.",
       "type": "function",
-      "value": "anchor( <dashed-ident>? <anchor-side>, <length-percentage>? )",
+      "value": "anchor( <anchor-element>? <anchor-side>, <length-percentage>? )",
       "values": [
+        {
+          "name": "<dashed-ident>",
+          "prose": "Specifies the anchor name it will look for. This name is a tree-scoped reference.",
+          "type": "value",
+          "value": "<dashed-ident>"
+        },
+        {
+          "name": "implicit",
+          "prose": "Selects one of the implicit anchor elements defined for the element, if possible.",
+          "type": "value",
+          "value": "implicit"
+        },
+        {
+          "name": "popover",
+          "prose": "If the element has an implicit anchor element defined by the Popover API, uses that if possible.",
+          "type": "value",
+          "value": "popover"
+        },
+        {
+          "name": "auto",
+          "prose": "The auto keyword indicates automatic anchor positioning. See for details.",
+          "type": "value",
+          "value": "auto"
+        },
         {
           "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.",
@@ -175,16 +214,21 @@
         }
       ]
     },
+    {
+      "name": "<anchor-element>",
+      "type": "type",
+      "value": "<dashed-ident> | implicit | popover"
+    },
     {
       "name": "<anchor-side>",
       "type": "type",
-      "value": "top | left | right | bottom | start | end | self-start | self-end | <percentage> | center"
+      "value": "auto | top | left | right | bottom | start | end | self-start | self-end | <percentage> | center"
     },
     {
       "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>? )",
+      "value": "anchor( <anchor-element>? <anchor-size>, <length-percentage>? )",
       "values": [
         {
           "name": "width",

package/css-color-5.json

@@ -368,6 +368,36 @@
       "name": "<cmyk-component>",
       "type": "type",
       "value": "<number> | <percentage>"
+    },
+    {
+      "name": "<color-space>",
+      "type": "type",
+      "value": "<rectangular-color-space> | <polar-color-space> | <custom-color-space>"
+    },
+    {
+      "name": "<rectangular-color-space>",
+      "type": "type",
+      "value": "srgb | srgb-linear | lab | oklab | xyz | xyz-d50 | xyz-d65"
+    },
+    {
+      "name": "<polar-color-space>",
+      "type": "type",
+      "value": "hsl | hwb | lch | oklch"
+    },
+    {
+      "name": "<custom-color-space>",
+      "type": "type",
+      "value": "<dashed-ident>"
+    },
+    {
+      "name": "<hue-interpolation-method>",
+      "type": "type",
+      "value": "[ shorter | longer | increasing | decreasing ] hue"
+    },
+    {
+      "name": "<color-interpolation-method>",
+      "type": "type",
+      "value": "in [ <rectangular-color-space> | <polar-color-space> <hue-interpolation-method>? | <custom-color-space> ]"
     }
   ]
 }

package/css-display.json

@@ -28,7 +28,7 @@
     },
     {
       "name": "order",
-      "value": "[ <'layout-order'> <'reading-order'>? ] | [ reading && <'reading-order'> ] | [ layout && <'layout-order'> ] | [ reading-and-layout && <integer> ]",
+      "value": "[ <'layout-order'> <'reading-order'>? ] | [ [ reading || layout ] && <integer> ]",
       "initial": "see individual properties",
       "appliesTo": "flex items and grid items",
       "inherited": "no",
@@ -38,16 +38,22 @@
       "canonicalOrder": "per grammar",
       "values": [
         {
-          "name": "reading-and-layout",
-          "prose": "The order property sets both layout-order and reading-order in a single declaration. Unless reading-and-layout is specified—in which case both <'reading-order'> and <'layout-order'> are set to the specified <integer> value—the omitted longhand is set to zero.",
+          "name": "<integer>",
+          "prose": "If one integer and no keyword is specified, then sets layout-order to the specified integer, and sets reading-order to its initial value. If two integers are specified, the first sets layout-order and the second sets reading-order. Otherwise sets the appropriate longhand(s) to the specified integer(s).",
           "type": "value",
-          "value": "reading-and-layout"
+          "value": "<integer>"
         },
         {
-          "name": "<integer>",
-          "prose": "Specifically, the layout-order property controls the order in which flex items or grid items appear within their container by assigning them to the ordinal groups, as specified by its <integer> value.",
+          "name": "layout",
+          "prose": "Indicates setting layout-order to the specified integer. If reading is not specified, reading-order is set to its initial value.",
           "type": "value",
-          "value": "<integer>"
+          "value": "layout"
+        },
+        {
+          "name": "reading",
+          "prose": "Indicates setting reading-order to the specified integer. If layout is not specified, layout-order is set to its initial value.",
+          "type": "value",
+          "value": "reading"
         }
       ],
       "styleDeclaration": [
@@ -87,6 +93,14 @@
       "computedValue": "specified integer",
       "canonicalOrder": "per grammar",
       "animationType": "by computed value type",
+      "values": [
+        {
+          "name": "<integer>",
+          "prose": "Specifically, the layout-order property controls the order in which flex items or grid items appear within their container by assigning them to the ordinal groups, as specified by its <integer> value.",
+          "type": "value",
+          "value": "<integer>"
+        }
+      ],
       "styleDeclaration": [
         "layout-order",
         "layoutOrder"

package/css-images-4.json

@@ -151,7 +151,7 @@
     {
       "name": "linear-gradient()",
       "type": "function",
-      "value": "linear-gradient( [ <angle> | to <side-or-corner> ]? || <color-interpolation-method>, <color-stop-list> )"
+      "value": "linear-gradient( [ [ <angle> | to <side-or-corner> ] || <color-interpolation-method> ]? , <color-stop-list> )"
     },
     {
       "name": "<side-or-corner>",
@@ -161,12 +161,12 @@
     {
       "name": "radial-gradient()",
       "type": "function",
-      "value": "radial-gradient( [[ <ending-shape> || <size> ]? [ at <position> ]? ] || <color-interpolation-method>, <color-stop-list> )"
+      "value": "radial-gradient( [ [ [ <rg-ending-shape> || <rg-size> ]? [ at <position> ]? ] || <color-interpolation-method>]? , <color-stop-list> )"
     },
     {
       "name": "conic-gradient()",
       "type": "function",
-      "value": "conic-gradient( [ [ from <angle> ]? [ at <position> ]? ] || <color-interpolation-method>, <angular-color-stop-list> )",
+      "value": "conic-gradient( [ [ [ from <angle> ]? [ at <position> ]? ] || <color-interpolation-method> ]? , <angular-color-stop-list> )",
       "values": [
         {
           "name": "<angle>",

package/css-overflow-4.json

@@ -223,35 +223,121 @@
         "textOverflow"
       ]
     },
+    {
+      "name": "block-ellipsis",
+      "value": "none | auto | <string>",
+      "initial": "none",
+      "appliesTo": "block containers",
+      "inherited": "yes",
+      "percentages": "N/A",
+      "computedValue": "specified value",
+      "canonicalOrder": "per grammar",
+      "animationType": "discrete",
+      "values": [
+        {
+          "name": "none",
+          "prose": "The rendering is unaffected.",
+          "type": "value",
+          "value": "none"
+        },
+        {
+          "name": "auto",
+          "prose": "Render an ellipsis character (U+2026)—or a more typographically-appropriate equivalent—as the block overflow ellipsis at the end of the affected line box. UAs should use the conventions of the content language, writing system, and writing mode to determine the most appropriate ellipsis string.",
+          "type": "value",
+          "value": "auto"
+        },
+        {
+          "name": "<string>",
+          "prose": "Render the specified string as the block overflow ellipsis at the end of the affected line box. The UA may truncate this string if it is absurdly long.",
+          "type": "value",
+          "value": "<string>"
+        }
+      ],
+      "styleDeclaration": [
+        "block-ellipsis",
+        "blockEllipsis"
+      ]
+    },
+    {
+      "name": "line-clamp",
+      "value": "none | <integer> <'block-ellipsis'>?",
+      "initial": "none",
+      "appliesTo": "see individual properties",
+      "inherited": "see individual properties",
+      "percentages": "N/A",
+      "computedValue": "see individual properties",
+      "animationType": "see individual properties",
+      "canonicalOrder": "per grammar",
+      "values": [
+        {
+          "name": "none",
+          "prose": "Sets max-lines to none, continue to auto, and block-ellipsis to none.",
+          "type": "value",
+          "value": "none"
+        },
+        {
+          "name": "<integer>",
+          "prose": "Sets max-lines to the specified <integer>, continue to discard, and the block-ellipsis property to second component of the value or to auto if omitted.",
+          "type": "value",
+          "value": "<integer>"
+        }
+      ],
+      "styleDeclaration": [
+        "line-clamp",
+        "lineClamp"
+      ]
+    },
+    {
+      "name": "-webkit-line-clamp",
+      "value": "none | <integer>",
+      "initial": "none",
+      "appliesTo": "see individual properties",
+      "inherited": "see individual properties",
+      "percentages": "N/A",
+      "computedValue": "see individual properties",
+      "animationType": "see individual properties",
+      "canonicalOrder": "per grammar",
+      "styleDeclaration": [
+        "-webkit-line-clamp",
+        "WebkitLineClamp",
+        "webkitLineClamp"
+      ]
+    },
     {
       "name": "continue",
-      "value": "auto | overflow | paginate | fragments | discard",
+      "value": "auto | discard | -webkit-discard | overflow | paginate | fragments",
       "initial": "auto",
-      "appliesTo": "block containers [CSS2], flex containers [CSS3-FLEXBOX], and grid containers [CSS3-GRID-LAYOUT]",
+      "appliesTo": "block containers and multicol containers",
       "inherited": "no",
       "percentages": "N/A",
-      "computedValue": "see below",
+      "computedValue": "specified keyword",
       "canonicalOrder": "per grammar",
       "animationType": "discrete",
       "values": [
         {
-          "name": "auto",
-          "prose": "auto may only occur as a computed value if the element is a CSS Region other than the last one in a region chain. Content that doesn’t fit is pushed to the next region of the chain. In all other cases, auto computes to one of the other values.",
+          "name": "-webkit-discard",
+          "prose": "The -webkit-discard value behaves identically to discard, except that it only takes effect if the computed value of the display property on the parent is -webkit-box or -webkit-inline-box and the computed value of the -webkit-box-orient property on the parent is vertical.",
           "type": "value",
-          "value": "auto"
+          "value": "-webkit-discard"
         },
         {
-          "name": "overflow",
-          "prose": "Content that doesn’t fit overflows, according to the overflow property",
+          "name": "auto",
+          "prose": "If the box has more content than can fit, the excess content is handled according to the usual rules.",
           "type": "value",
-          "value": "overflow"
+          "value": "auto"
         },
         {
           "name": "discard",
-          "prose": "Content that doesn’t fit is discarded at a fragmentation break When the element isn’t a fragmentation container already, should this work by turning it directly into one, or by creating a fragment box inside it like fragments does?",
+          "prose": "The box becomes a fragmentation container that captures region breaks, if it is not already. [CSS-BREAK-3] Content after the first region break is not rendered (see below). (If the box is a multi-column container, any overflow columns are also not rendered.)",
           "type": "value",
           "value": "discard"
         },
+        {
+          "name": "overflow",
+          "prose": "Content that doesn’t fit overflows, according to the overflow property",
+          "type": "value",
+          "value": "overflow"
+        },
         {
           "name": "paginate",
           "prose": "Content that doesn’t fit paginates. This creates a paginated view inside the element similar to the way that 'overflow: scroll' creates a scrollable view. See paginated overflow",
@@ -271,9 +357,9 @@
     },
     {
       "name": "max-lines",
-      "value": "none | <integer>",
+      "value": "none | <integer [1,∞]>",
       "initial": "none",
-      "appliesTo": "fragment boxes",
+      "appliesTo": "block containers which are also fragmentation containers that capture region breaks",
       "inherited": "no",
       "percentages": "N/A",
       "computedValue": "the keyword none or an integer",
@@ -282,15 +368,9 @@
       "values": [
         {
           "name": "none",
-          "prose": "Breaks occur only as specified elsewhere.",
+          "prose": "Otherwise, if the value of max-lines is not none, a region break is forced after its Nth descendant in-flow line box, where N is the specified value of max-lines. Only lines boxes in the same Block Formatting Context are counted: the contents of descendants that establish independent formatting contexts are skipped over while counting line boxes.",
           "type": "value",
           "value": "none"
-        },
-        {
-          "name": "<integer>",
-          "prose": "In addition to any breaks specified elsewhere, a break is forced before any line that would exceed the given number of lines being placed inside the element (excluding lines that are in a different block formatting context from the block formatting context to which an unstyled child of the element would belong). If there are multiple boundaries between this line and the previous, where exactly (in terms of element boundaries) is the break forced? Only positive integers are accepted. Zero or negative integers are a parse error.",
-          "type": "value",
-          "value": "<integer>"
         }
       ],
       "styleDeclaration": [

package/css-overflow.json

@@ -295,143 +295,6 @@
         "text-overflow",
         "textOverflow"
       ]
-    },
-    {
-      "name": "block-ellipsis",
-      "value": "none | auto | <string>",
-      "initial": "none",
-      "appliesTo": "block containers",
-      "inherited": "yes",
-      "percentages": "N/A",
-      "computedValue": "specified value",
-      "canonicalOrder": "per grammar",
-      "animationType": "discrete",
-      "values": [
-        {
-          "name": "none",
-          "prose": "The rendering is unaffected.",
-          "type": "value",
-          "value": "none"
-        },
-        {
-          "name": "auto",
-          "prose": "Render an ellipsis character (U+2026)—or a more typographically-appropriate equivalent—as the block overflow ellipsis at the end of the affected line box. UAs should use the conventions of the content language, writing system, and writing mode to determine the most appropriate ellipsis string.",
-          "type": "value",
-          "value": "auto"
-        },
-        {
-          "name": "<string>",
-          "prose": "Render the specified string as the block overflow ellipsis at the end of the affected line box. The UA may truncate this string if it is absurdly long.",
-          "type": "value",
-          "value": "<string>"
-        }
-      ],
-      "styleDeclaration": [
-        "block-ellipsis",
-        "blockEllipsis"
-      ]
-    },
-    {
-      "name": "line-clamp",
-      "value": "none | <integer> <'block-ellipsis'>?",
-      "initial": "none",
-      "appliesTo": "see individual properties",
-      "inherited": "see individual properties",
-      "percentages": "N/A",
-      "computedValue": "see individual properties",
-      "animationType": "see individual properties",
-      "canonicalOrder": "per grammar",
-      "values": [
-        {
-          "name": "none",
-          "prose": "Sets max-lines to none, continue to auto, and block-ellipsis to none.",
-          "type": "value",
-          "value": "none"
-        },
-        {
-          "name": "<integer>",
-          "prose": "Sets max-lines to the specified <integer>, continue to discard, and the block-ellipsis property to second component of the value or to auto if omitted.",
-          "type": "value",
-          "value": "<integer>"
-        }
-      ],
-      "styleDeclaration": [
-        "line-clamp",
-        "lineClamp"
-      ]
-    },
-    {
-      "name": "-webkit-line-clamp",
-      "value": "none | <integer>",
-      "initial": "none",
-      "appliesTo": "see individual properties",
-      "inherited": "see individual properties",
-      "percentages": "N/A",
-      "computedValue": "see individual properties",
-      "animationType": "see individual properties",
-      "canonicalOrder": "per grammar",
-      "styleDeclaration": [
-        "-webkit-line-clamp",
-        "WebkitLineClamp",
-        "webkitLineClamp"
-      ]
-    },
-    {
-      "name": "continue",
-      "value": "auto | discard | -webkit-discard",
-      "initial": "auto",
-      "appliesTo": "block containers and multicol containers",
-      "inherited": "no",
-      "percentages": "N/A",
-      "computedValue": "specified keyword",
-      "canonicalOrder": "per grammar",
-      "animationType": "discrete",
-      "values": [
-        {
-          "name": "-webkit-discard",
-          "prose": "The -webkit-discard value behaves identically to discard, except that it only takes effect if the computed value of the display property on the parent is -webkit-box or -webkit-inline-box and the computed value of the -webkit-box-orient property on the parent is vertical.",
-          "type": "value",
-          "value": "-webkit-discard"
-        },
-        {
-          "name": "auto",
-          "prose": "If the box has more content than can fit, the excess content is handled according to the usual rules.",
-          "type": "value",
-          "value": "auto"
-        },
-        {
-          "name": "discard",
-          "prose": "The box becomes a fragmentation container that captures region breaks, if it is not already. [CSS-BREAK-3] Content after the first region break is not rendered (see below). (If the box is a multi-column container, any overflow columns are also not rendered.)",
-          "type": "value",
-          "value": "discard"
-        }
-      ],
-      "styleDeclaration": [
-        "continue"
-      ]
-    },
-    {
-      "name": "max-lines",
-      "value": "none | <integer [1,∞]>",
-      "initial": "none",
-      "appliesTo": "block containers which are also fragmentation containers that capture region breaks",
-      "inherited": "no",
-      "percentages": "N/A",
-      "computedValue": "the keyword none or an integer",
-      "canonicalOrder": "per grammar",
-      "animationType": "by computed value type",
-      "values": [
-        {
-          "name": "none",
-          "prose": "Otherwise, if the value of max-lines is not none, a region break is forced after its Nth descendant in-flow line box, where N is the specified value of max-lines. Only lines boxes in the same Block Formatting Context are counted: the contents of descendants that establish independent formatting contexts are skipped over while counting line boxes.",
-          "type": "value",
-          "value": "none"
-        }
-      ],
-      "styleDeclaration": [
-        "max-lines",
-        "maxLines"
-      ]
     }
   ],
   "atrules": [],

package/css-text-4.json

@@ -422,7 +422,7 @@
         },
         {
           "name": "<string>",
-          "prose": "Specifies the string that appears at the end of the line before a hyphenation break. The UA may truncate the used value to a limited number of typographic character units. (It must not truncate only part of a typographic character unit.)",
+          "prose": "Specifies the string that appears at the hyphenation break when hyphenating. (The position of this string is not affected: the UA must insert the string according to the typographic conventions of the content language, defaulting to immediately before the hyphenation break.) The UA may truncate the used value to a limited number of typographic character units; it must not truncate only part of a typographic character unit.",
           "type": "value",
           "value": "<string>"
         }

package/css-ui.json

@@ -90,7 +90,7 @@
       "name": "resize",
       "value": "none | both | horizontal | vertical | block | inline",
       "initial": "none",
-      "appliesTo": "elements with overflow other than visible, and optionally replaced elements such as images, videos, and iframes",
+      "appliesTo": "elements that are scroll containers and optionally replaced elements such as images, videos, and iframes",
       "inherited": "no",
       "percentages": "N/A",
       "computedValue": "specified keyword",

package/css-values-5.json

@@ -106,6 +106,23 @@
       "name": "<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).",
       "type": "type"
+    },
+    {
+      "name": "random()",
+      "prose": "The random() function is a math function that represents a random value between a minimum and maximum value, drawn from a uniform distribution, optionally limiting the possible values to a step between those limits:",
+      "type": "function",
+      "value": "random( <random-caching-options>? , <calc-sum>, <calc-sum>, [by <calc-sum>]? );"
+    },
+    {
+      "name": "<random-caching-options>",
+      "type": "type",
+      "value": "<dashed-ident> || per-element"
+    },
+    {
+      "name": "random-item()",
+      "prose": "The random-item() function resolves to a random item from among its list of items.",
+      "type": "function",
+      "value": "random-item( <random-caching-options> ';' <any-value> [ ';' <any-value> ]* )"
     }
   ]
 }

package/css-values.json

@@ -11,22 +11,19 @@
       "name": "mix()",
       "prose": "Interpolation of two values can be represented by the mix() functional notation, whose syntax is defined as follows:",
       "type": "function",
+      "value": "mix( <percentage> ';' <declaration-value> ';' <declaration-value> )",
       "values": [
         {
           "name": "<percentage>",
-          "prose": "Represents the interpolation point as progress from <start-value> to <end-value>.",
+          "prose": "Represents the interpolation progress between the two values.",
           "type": "value",
           "value": "<percentage>"
         },
         {
-          "name": "<start-value>",
-          "prose": "The value at the “start” (0%) of the interpolation range.",
-          "type": "type"
-        },
-        {
-          "name": "<end-value>",
-          "prose": "The value at the “end” (100%) of the interpolation range.",
-          "type": "type"
+          "name": "<declaration-value>",
+          "prose": "The first <declaration-value> represents the value at the “start” (0%) of the interpolation range, interpreted as a value for the property this function is used in. The second <declaration-value> represents the value at the “end” (100%) of the interpolation range, interpreted the same.",
+          "type": "value",
+          "value": "<declaration-value>"
         }
       ]
     },

package/package.json

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

package/scroll-animations.json

@@ -1,6 +1,6 @@
 {
   "spec": {
-    "title": "Scroll-linked Animations",
+    "title": "Scroll-driven Animations",
     "url": "https://drafts.csswg.org/scroll-animations-1/"
   },
   "properties": [