@webref/css 6.9.1 → 6.10.0

package/css-anchor-position.json

@@ -349,16 +349,16 @@
           "value": "implicit"
         },
         {
-          "name": "auto",
-          "prose": "Resolves to one of the anchor element’s sides, depending on which inset property it’s used in. Also triggers automatic fallback behavior. See § 3.2.1 Automatic Anchor Positioning for more details.",
+          "name": "inside",
+          "prose": "Resolves to one of the anchor element’s sides, depending on which inset property it’s used in. inside refers to the same side as the inset property (attaching the element to the \"inside\" of the anchor), while outside refers to the opposite.",
           "type": "value",
-          "value": "auto"
+          "value": "inside"
         },
         {
-          "name": "auto-same",
-          "prose": "Resolves to one of the anchor element’s sides, depending on which inset property it’s used in. Also triggers automatic fallback behavior. See § 3.2.1 Automatic Anchor Positioning for more details.",
+          "name": "outside",
+          "prose": "Resolves to one of the anchor element’s sides, depending on which inset property it’s used in. inside refers to the same side as the inset property (attaching the element to the \"inside\" of the anchor), while outside refers to the opposite.",
           "type": "value",
-          "value": "auto-same"
+          "value": "outside"
         },
         {
           "name": "top",
@@ -430,7 +430,7 @@
     {
       "name": "<anchor-side>",
       "type": "type",
-      "value": "auto | auto-same | top | left | right | bottom | start | end | self-start | self-end | <percentage> | center"
+      "value": "inside | outside | top | left | right | bottom | start | end | self-start | self-end | <percentage> | center"
     },
     {
       "name": "anchor-size()",

package/css-backgrounds.json

@@ -302,7 +302,7 @@
     },
     {
       "name": "background",
-      "value": "[<bg-layer># ,]? <final-bg-layer>",
+      "value": "<bg-layer>#? , <final-bg-layer>",
       "initial": "see individual properties",
       "appliesTo": "all elements",
       "inherited": "no",
@@ -788,7 +788,7 @@
     {
       "name": "<bg-position>",
       "type": "type",
-      "value": "[ left | center | right | top | bottom | <length-percentage> ] | [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ] | [ center | [ left | right ] <length-percentage>? ] && [ center | [ top | bottom ] <length-percentage>? ]"
+      "value": "[ [ left | center | right | top | bottom | <length-percentage> ] | [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ] | [ center | [ left | right ] <length-percentage>? ] && [ center | [ top | bottom ] <length-percentage>? ] ]"
     },
     {
       "name": "<bg-size>",

package/css-color.json

@@ -28,6 +28,14 @@
       "computedValue": "specified number, clamped to the range [0,1]",
       "canonicalOrder": "per grammar",
       "animationType": "by computed value type",
+      "values": [
+        {
+          "name": "<alpha-value>",
+          "prose": "The opacity to be applied to the element. The resulting opacity is applied to the entire element, rather than a particular color. Opacity values outside the range [0,1] are not invalid, and a preserved in specified values, but are clamped to the range [0, 1] in computed values.",
+          "type": "type",
+          "value": "<number> | <percentage>"
+        }
+      ],
       "styleDeclaration": [
         "opacity"
       ]
@@ -42,12 +50,224 @@
       "type": "type",
       "value": "<absolute-color-base> | currentcolor | <system-color>",
       "values": [
+        {
+          "name": "<alpha-value>",
+          "type": "type",
+          "value": "<number> | <percentage>"
+        },
         {
           "name": "none",
           "prose": "It can also be specified explicitly, by providing the keyword none for a component in a color function. All color functions (with the exception of those using the legacy color syntax) allow any of their components to be specified as none.",
           "type": "value",
           "value": "none"
         },
+        {
+          "name": "transparent",
+          "prose": "The keyword transparent specifies a transparent black. It is a type of <named-color>.",
+          "type": "value",
+          "value": "transparent"
+        },
+        {
+          "name": "currentcolor",
+          "prose": "The keyword currentcolor represents value of the color property on the same element. Unlike <named-color>s, it is not restricted to sRGB; the value can be any <color>. Its used values is determined by resolving color values.",
+          "type": "value",
+          "value": "currentcolor"
+        },
+        {
+          "name": "ActiveBorder",
+          "prose": "Active window border. Same as ButtonBorder.",
+          "type": "value",
+          "value": "ActiveBorder"
+        },
+        {
+          "name": "ActiveCaption",
+          "prose": "Active window caption. Same as CanvasText.",
+          "type": "value",
+          "value": "ActiveCaption"
+        },
+        {
+          "name": "AppWorkspace",
+          "prose": "Background color of multiple document interface. Same as Canvas.",
+          "type": "value",
+          "value": "AppWorkspace"
+        },
+        {
+          "name": "Background",
+          "prose": "Desktop background. Same as Canvas.",
+          "type": "value",
+          "value": "Background"
+        },
+        {
+          "name": "ButtonHighlight",
+          "prose": "The color of the border facing the light source for 3-D elements that appear 3-D due to one layer of surrounding border. Same as ButtonFace.",
+          "type": "value",
+          "value": "ButtonHighlight"
+        },
+        {
+          "name": "ButtonShadow",
+          "prose": "The color of the border away from the light source for 3-D elements that appear 3-D due to one layer of surrounding border. Same as ButtonFace.",
+          "type": "value",
+          "value": "ButtonShadow"
+        },
+        {
+          "name": "CaptionText",
+          "prose": "Text in caption, size box, and scrollbar arrow box. Same as CanvasText.",
+          "type": "value",
+          "value": "CaptionText"
+        },
+        {
+          "name": "InactiveBorder",
+          "prose": "Inactive window border. Same as ButtonBorder.",
+          "type": "value",
+          "value": "InactiveBorder"
+        },
+        {
+          "name": "InactiveCaption",
+          "prose": "Inactive window caption. Same as Canvas.",
+          "type": "value",
+          "value": "InactiveCaption"
+        },
+        {
+          "name": "InactiveCaptionText",
+          "prose": "Color of text in an inactive caption. Same as GrayText.",
+          "type": "value",
+          "value": "InactiveCaptionText"
+        },
+        {
+          "name": "InfoBackground",
+          "prose": "Background color for tooltip controls. Same as Canvas.",
+          "type": "value",
+          "value": "InfoBackground"
+        },
+        {
+          "name": "InfoText",
+          "prose": "Text color for tooltip controls. Same as CanvasText.",
+          "type": "value",
+          "value": "InfoText"
+        },
+        {
+          "name": "Menu",
+          "prose": "Menu background. Same as Canvas.",
+          "type": "value",
+          "value": "Menu"
+        },
+        {
+          "name": "MenuText",
+          "prose": "Text in menus. Same as CanvasText.",
+          "type": "value",
+          "value": "MenuText"
+        },
+        {
+          "name": "Scrollbar",
+          "prose": "Scroll bar gray area. Same as Canvas.",
+          "type": "value",
+          "value": "Scrollbar"
+        },
+        {
+          "name": "ThreeDDarkShadow",
+          "prose": "The color of the darker (generally outer) of the two borders away from the light source for 3-D elements that appear 3-D due to two concentric layers of surrounding border. Same as ButtonBorder.",
+          "type": "value",
+          "value": "ThreeDDarkShadow"
+        },
+        {
+          "name": "ThreeDFace",
+          "prose": "The face background color for 3-D elements that appear 3-D due to two concentric layers of surrounding border. Same as ButtonFace.",
+          "type": "value",
+          "value": "ThreeDFace"
+        },
+        {
+          "name": "ThreeDHighlight",
+          "prose": "The color of the lighter (generally outer) of the two borders facing the light source for 3-D elements that appear 3-D due to two concentric layers of surrounding border. Same as ButtonBorder.",
+          "type": "value",
+          "value": "ThreeDHighlight"
+        },
+        {
+          "name": "ThreeDLightShadow",
+          "prose": "The color of the darker (generally inner) of the two borders facing the light source for 3-D elements that appear 3-D due to two concentric layers of surrounding border. Same as ButtonBorder.",
+          "type": "value",
+          "value": "ThreeDLightShadow"
+        },
+        {
+          "name": "ThreeDShadow",
+          "prose": "The color of the lighter (generally inner) of the two borders away from the light source for 3-D elements that appear 3-D due to two concentric layers of surrounding border. Same as ButtonBorder.",
+          "type": "value",
+          "value": "ThreeDShadow"
+        },
+        {
+          "name": "Window",
+          "prose": "Window background. Same as Canvas.",
+          "type": "value",
+          "value": "Window"
+        },
+        {
+          "name": "WindowFrame",
+          "prose": "Window frame. Same as ButtonBorder.",
+          "type": "value",
+          "value": "WindowFrame"
+        },
+        {
+          "name": "WindowText",
+          "prose": "Text in windows. Same as CanvasText.",
+          "type": "value",
+          "value": "WindowText"
+        }
+      ]
+    },
+    {
+      "name": "<absolute-color-base>",
+      "type": "type",
+      "value": "<hex-color> | <absolute-color-function> | <named-color> | transparent"
+    },
+    {
+      "name": "<absolute-color-function>",
+      "type": "type",
+      "value": "<rgb()> | <rgba()> | <hsl()> | <hsla()> | <hwb()> | <lab()> | <lch()> | <oklab()> | <oklch()> | <color()>"
+    },
+    {
+      "name": "<hue>",
+      "type": "type",
+      "value": "<number> | <angle>"
+    },
+    {
+      "name": "rgb()",
+      "type": "function",
+      "value": "[ <legacy-rgb-syntax> | <modern-rgb-syntax> ]"
+    },
+    {
+      "name": "rgba()",
+      "type": "function",
+      "value": "[ <legacy-rgba-syntax> | <modern-rgba-syntax> ]"
+    },
+    {
+      "name": "<legacy-rgb-syntax>",
+      "type": "type",
+      "value": "rgb( <percentage>#{3} , <alpha-value>? ) | rgb( <number>#{3} , <alpha-value>? )"
+    },
+    {
+      "name": "<legacy-rgba-syntax>",
+      "type": "type",
+      "value": "rgba( <percentage>#{3} , <alpha-value>? ) | rgba( <number>#{3} , <alpha-value>? )"
+    },
+    {
+      "name": "<modern-rgb-syntax>",
+      "type": "type",
+      "value": "rgb( [ <number> | <percentage> | none]{3} [ / [<alpha-value> | none] ]? )"
+    },
+    {
+      "name": "<modern-rgba-syntax>",
+      "type": "type",
+      "value": "rgba( [ <number> | <percentage> | none]{3} [ / [<alpha-value> | none] ]? )"
+    },
+    {
+      "name": "<hex-color>",
+      "prose": "The syntax of a <hex-color> is a <hash-token> token whose value consists of 3, 4, 6, or 8 hexadecimal digits. In other words, a hex color is written as a hash character, \"#\", followed by some number of digits 0-9 or letters a-f (the case of the letters doesn’t matter - #00ff00 is identical to #00FF00).",
+      "type": "type"
+    },
+    {
+      "name": "<named-color>",
+      "prose": "CSS defines a large set of named colors, so that common colors can be written and read more easily. A <named-color> is written as an <ident>, accepted anywhere a <color> is. As usual for CSS-defined <ident>s, all of these keywords are ASCII case-insensitive.",
+      "type": "type",
+      "values": [
         {
           "name": "aliceblue",
           "type": "value",
@@ -787,109 +1007,25 @@
           "name": "yellowgreen",
           "type": "value",
           "value": "yellowgreen"
-        },
-        {
-          "name": "transparent",
-          "prose": "The keyword transparent specifies a transparent black. It is a type of <named-color>.",
-          "type": "value",
-          "value": "transparent"
-        },
-        {
-          "name": "currentcolor",
-          "prose": "The keyword currentcolor represents value of the color property on the same element. Unlike <named-color>s, it is not restricted to sRGB; the value can be any <color>. Its used values is determined by resolving color values.",
-          "type": "value",
-          "value": "currentcolor"
         }
       ]
     },
-    {
-      "name": "<absolute-color-base>",
-      "type": "type",
-      "value": "<hex-color> | <absolute-color-function> | <named-color> | transparent"
-    },
-    {
-      "name": "<absolute-color-function>",
-      "type": "type",
-      "value": "<rgb()> | <rgba()> | <hsl()> | <hsla()> | <hwb()> | <lab()> | <lch()> | <oklab()> | <oklch()> | <color()>"
-    },
-    {
-      "name": "<alpha-value>",
-      "type": "type",
-      "value": "<number> | <percentage>"
-    },
-    {
-      "name": "<hue>",
-      "type": "type",
-      "value": "<number> | <angle>"
-    },
-    {
-      "name": "rgb()",
-      "type": "function",
-      "value": "[ <legacy-rgb-syntax> | <modern-rgb-syntax> ]"
-    },
-    {
-      "name": "rgba()",
-      "type": "function",
-      "value": "[ <legacy-rgba-syntax> | <modern-rgba-syntax> ]"
-    },
-    {
-      "name": "<legacy-rgb-syntax>",
-      "type": "type",
-      "value": "rgb( <percentage>#{3} , <alpha-value>? ) | rgb( <number>#{3} , <alpha-value>? )"
-    },
-    {
-      "name": "<legacy-rgba-syntax>",
-      "type": "type",
-      "value": "rgba( <percentage>#{3} , <alpha-value>? ) | rgba( <number>#{3} , <alpha-value>? )"
-    },
-    {
-      "name": "<modern-rgb-syntax>",
-      "type": "type",
-      "value": "rgb( [ <number> | <percentage> | none]{3} [ / [<alpha-value> | none] ]? )"
-    },
-    {
-      "name": "<modern-rgba-syntax>",
-      "type": "type",
-      "value": "rgba( [ <number> | <percentage> | none]{3} [ / [<alpha-value> | none] ]? )"
-    },
-    {
-      "name": "<hex-color>",
-      "prose": "The syntax of a <hex-color> is a <hash-token> token whose value consists of 3, 4, 6, or 8 hexadecimal digits. In other words, a hex color is written as a hash character, \"#\", followed by some number of digits 0-9 or letters a-f (the case of the letters doesn’t matter - #00ff00 is identical to #00FF00).",
-      "type": "type"
-    },
-    {
-      "name": "<named-color>",
-      "prose": "CSS defines a large set of named colors, so that common colors can be written and read more easily. A <named-color> is written as an <ident>, accepted anywhere a <color> is. As usual for CSS-defined <ident>s, all of these keywords are ASCII case-insensitive.",
-      "type": "type"
-    },
     {
       "name": "<system-color>",
       "prose": "However, in forced colors mode, most colors on the page are forced into a restricted, user-chosen palette. The <system-color> keywords expose these user-chosen colors so that the rest of the page can integrate with this restricted palette.",
       "type": "type",
       "values": [
         {
-          "name": "Canvas",
-          "prose": "Background of application content or documents.",
-          "type": "value",
-          "value": "Canvas"
-        },
-        {
-          "name": "CanvasText",
-          "prose": "Text in application content or documents.",
-          "type": "value",
-          "value": "CanvasText"
-        },
-        {
-          "name": "LinkText",
-          "prose": "Text in non-active, non-visited links. For light backgrounds, traditionally blue.",
+          "name": "AccentColor",
+          "prose": "Background of accented user interface controls.",
           "type": "value",
-          "value": "LinkText"
+          "value": "AccentColor"
         },
         {
-          "name": "VisitedText",
-          "prose": "Text in visited links. For light backgrounds, traditionally purple.",
+          "name": "AccentColorText",
+          "prose": "Text of accented user interface controls.",
           "type": "value",
-          "value": "VisitedText"
+          "value": "AccentColorText"
         },
         {
           "name": "ActiveText",
@@ -897,6 +1033,12 @@
           "type": "value",
           "value": "ActiveText"
         },
+        {
+          "name": "ButtonBorder",
+          "prose": "The base border color for push buttons.",
+          "type": "value",
+          "value": "ButtonBorder"
+        },
         {
           "name": "ButtonFace",
           "prose": "The face background color for push buttons.",
@@ -910,10 +1052,16 @@
           "value": "ButtonText"
         },
         {
-          "name": "ButtonBorder",
-          "prose": "The base border color for push buttons.",
+          "name": "Canvas",
+          "prose": "Background of application content or documents.",
           "type": "value",
-          "value": "ButtonBorder"
+          "value": "Canvas"
+        },
+        {
+          "name": "CanvasText",
+          "prose": "Text in application content or documents.",
+          "type": "value",
+          "value": "CanvasText"
         },
         {
           "name": "Field",
@@ -927,6 +1075,12 @@
           "type": "value",
           "value": "FieldText"
         },
+        {
+          "name": "GrayText",
+          "prose": "Disabled text. (Often, but not necessarily, gray.)",
+          "type": "value",
+          "value": "GrayText"
+        },
         {
           "name": "Highlight",
           "prose": "Background of selected text, for example from ::selection.",
@@ -940,16 +1094,10 @@
           "value": "HighlightText"
         },
         {
-          "name": "SelectedItem",
-          "prose": "Background of selected items, for example a selected checkbox.",
-          "type": "value",
-          "value": "SelectedItem"
-        },
-        {
-          "name": "SelectedItemText",
-          "prose": "Text of selected items.",
+          "name": "LinkText",
+          "prose": "Text in non-active, non-visited links. For light backgrounds, traditionally blue.",
           "type": "value",
-          "value": "SelectedItemText"
+          "value": "LinkText"
         },
         {
           "name": "Mark",
@@ -964,22 +1112,22 @@
           "value": "MarkText"
         },
         {
-          "name": "GrayText",
-          "prose": "Disabled text. (Often, but not necessarily, gray.)",
+          "name": "SelectedItem",
+          "prose": "Background of selected items, for example a selected checkbox.",
           "type": "value",
-          "value": "GrayText"
+          "value": "SelectedItem"
         },
         {
-          "name": "AccentColor",
-          "prose": "Background of accented user interface controls.",
+          "name": "SelectedItemText",
+          "prose": "Text of selected items.",
           "type": "value",
-          "value": "AccentColor"
+          "value": "SelectedItemText"
         },
         {
-          "name": "AccentColorText",
-          "prose": "Text of accented user interface controls.",
+          "name": "VisitedText",
+          "prose": "Text in visited links. For light backgrounds, traditionally purple.",
           "type": "value",
-          "value": "AccentColorText"
+          "value": "VisitedText"
         }
       ]
     },
@@ -1200,7 +1348,147 @@
     {
       "name": "<deprecated-color>",
       "prose": "The deprecated system colors are represented as the <deprecated-color> sub-type, and are defined as:",
-      "type": "type"
+      "type": "type",
+      "values": [
+        {
+          "name": "ActiveBorder",
+          "prose": "Active window border. Same as ButtonBorder.",
+          "type": "value",
+          "value": "ActiveBorder"
+        },
+        {
+          "name": "ActiveCaption",
+          "prose": "Active window caption. Same as CanvasText.",
+          "type": "value",
+          "value": "ActiveCaption"
+        },
+        {
+          "name": "AppWorkspace",
+          "prose": "Background color of multiple document interface. Same as Canvas.",
+          "type": "value",
+          "value": "AppWorkspace"
+        },
+        {
+          "name": "Background",
+          "prose": "Desktop background. Same as Canvas.",
+          "type": "value",
+          "value": "Background"
+        },
+        {
+          "name": "ButtonHighlight",
+          "prose": "The color of the border facing the light source for 3-D elements that appear 3-D due to one layer of surrounding border. Same as ButtonFace.",
+          "type": "value",
+          "value": "ButtonHighlight"
+        },
+        {
+          "name": "ButtonShadow",
+          "prose": "The color of the border away from the light source for 3-D elements that appear 3-D due to one layer of surrounding border. Same as ButtonFace.",
+          "type": "value",
+          "value": "ButtonShadow"
+        },
+        {
+          "name": "CaptionText",
+          "prose": "Text in caption, size box, and scrollbar arrow box. Same as CanvasText.",
+          "type": "value",
+          "value": "CaptionText"
+        },
+        {
+          "name": "InactiveBorder",
+          "prose": "Inactive window border. Same as ButtonBorder.",
+          "type": "value",
+          "value": "InactiveBorder"
+        },
+        {
+          "name": "InactiveCaption",
+          "prose": "Inactive window caption. Same as Canvas.",
+          "type": "value",
+          "value": "InactiveCaption"
+        },
+        {
+          "name": "InactiveCaptionText",
+          "prose": "Color of text in an inactive caption. Same as GrayText.",
+          "type": "value",
+          "value": "InactiveCaptionText"
+        },
+        {
+          "name": "InfoBackground",
+          "prose": "Background color for tooltip controls. Same as Canvas.",
+          "type": "value",
+          "value": "InfoBackground"
+        },
+        {
+          "name": "InfoText",
+          "prose": "Text color for tooltip controls. Same as CanvasText.",
+          "type": "value",
+          "value": "InfoText"
+        },
+        {
+          "name": "Menu",
+          "prose": "Menu background. Same as Canvas.",
+          "type": "value",
+          "value": "Menu"
+        },
+        {
+          "name": "MenuText",
+          "prose": "Text in menus. Same as CanvasText.",
+          "type": "value",
+          "value": "MenuText"
+        },
+        {
+          "name": "Scrollbar",
+          "prose": "Scroll bar gray area. Same as Canvas.",
+          "type": "value",
+          "value": "Scrollbar"
+        },
+        {
+          "name": "ThreeDDarkShadow",
+          "prose": "The color of the darker (generally outer) of the two borders away from the light source for 3-D elements that appear 3-D due to two concentric layers of surrounding border. Same as ButtonBorder.",
+          "type": "value",
+          "value": "ThreeDDarkShadow"
+        },
+        {
+          "name": "ThreeDFace",
+          "prose": "The face background color for 3-D elements that appear 3-D due to two concentric layers of surrounding border. Same as ButtonFace.",
+          "type": "value",
+          "value": "ThreeDFace"
+        },
+        {
+          "name": "ThreeDHighlight",
+          "prose": "The color of the lighter (generally outer) of the two borders facing the light source for 3-D elements that appear 3-D due to two concentric layers of surrounding border. Same as ButtonBorder.",
+          "type": "value",
+          "value": "ThreeDHighlight"
+        },
+        {
+          "name": "ThreeDLightShadow",
+          "prose": "The color of the darker (generally inner) of the two borders facing the light source for 3-D elements that appear 3-D due to two concentric layers of surrounding border. Same as ButtonBorder.",
+          "type": "value",
+          "value": "ThreeDLightShadow"
+        },
+        {
+          "name": "ThreeDShadow",
+          "prose": "The color of the lighter (generally inner) of the two borders away from the light source for 3-D elements that appear 3-D due to two concentric layers of surrounding border. Same as ButtonBorder.",
+          "type": "value",
+          "value": "ThreeDShadow"
+        },
+        {
+          "name": "Window",
+          "prose": "Window background. Same as Canvas.",
+          "type": "value",
+          "value": "Window"
+        },
+        {
+          "name": "WindowFrame",
+          "prose": "Window frame. Same as ButtonBorder.",
+          "type": "value",
+          "value": "WindowFrame"
+        },
+        {
+          "name": "WindowText",
+          "prose": "Text in windows. Same as CanvasText.",
+          "type": "value",
+          "value": "WindowText"
+        }
+      ]
     },
     {
       "name": "<quirky-color>",

package/css-easing.json

@@ -83,7 +83,7 @@
     },
     {
       "name": "<step-easing-function>",
-      "value": "step-start | step-end | steps(<integer>[, <step-position>]?)",
+      "value": "step-start | step-end | steps(<integer> , <step-position>?)",
       "type": "type",
       "values": [
         {

package/css-fonts.json

@@ -1285,19 +1285,19 @@
       "values": [
         {
           "name": "serif",
-          "prose": "Serif fonts represent the formal text style for a script. This often means, but is not limited to, glyphs that have finishing strokes, flared or tapering ends, or have actual serifed endings (including slab serifs). Serif fonts are typically proportionately-spaced. They often display a greater variation between thick and thin strokes than fonts from the sans-serif generic font family. CSS uses the term \"serif\" to apply to a font for any script, although other names might be more familiar for particular scripts, such as Mincho (Japanese), Sung or Song (Chinese), Batang (Korean). For Arabic, the Naskh style would correspond to serif. This is due to its typographic role, rather than its design style. Any font that fits this typographic role may be used to represent the generic serif family. serif must always map to at least one matched font face. Sample serif fonts",
+          "prose": "Serif fonts represent glyphs that have finishing strokes, flared or tapering ends, or have actual serifed endings (including slab serifs). Serif fonts are typically proportionately-spaced. They often display a greater variation between thick and thin strokes than fonts from the sans-serif generic font family. CSS uses the term \"serif\" to apply to a font for any script, although other names might be more familiar for particular scripts, such as Mincho (Japanese), Sung or Song (Chinese), Batang (Korean). For Arabic, the Naskh style would correspond to serif. serif must always map to at least one matched font face. Sample serif fonts",
           "type": "value",
           "value": "serif"
         },
         {
           "name": "sans-serif",
-          "prose": "Glyphs in sans-serif fonts, as the term is used in CSS, are generally low contrast (vertical and horizontal stems have the close to the same thickness) and have stroke endings that are plain (without any flaring, cross stroke, or other ornamentation). Sans-serif fonts are typically proportionately-spaced. They often have little variation between thick and thin strokes, compared to fonts from the serif family. CSS uses the term \"sans-serif\" to apply to a font for any script, although other names might be more familiar for particular scripts, such as Gothic (Japanese), Hei (Chinese), or Gulim (Korean). Any font that fits this typographic role may be used to represent the generic sans-serif family. sans-serif must always map to at least one matched font face. Sample sans-serif fonts",
+          "prose": "Glyphs in sans-serif fonts, as the term is used in CSS, are generally low contrast (vertical and horizontal stems have the close to the same thickness) and have stroke endings that are plain (without any flaring, cross stroke, or other ornamentation). Sans-serif fonts are typically proportionately-spaced. They often have little variation between thick and thin strokes, compared to fonts from the serif family. CSS uses the term \"sans-serif\" to apply to a font for any script, although other names might be more familiar for particular scripts, such as Gothic (Japanese), Hei (Chinese), or Gulim (Korean). sans-serif must always map to at least one matched font face. Sample sans-serif fonts",
           "type": "value",
           "value": "sans-serif"
         },
         {
           "name": "cursive",
-          "prose": "Glyphs in cursive fonts generally use a more informal script style, and the result looks more like handwritten pen or brush writing than printed letterwork. For example, Kaiti (Chinese), which uses a brush-based style, would be classified as a CSS cursive font family. CSS uses the term \"cursive\" to apply to a font for any script, although other names such as Chancery, Brush, Swing and Script are also used in font names. Sample cursive fonts",
+          "prose": "Glyphs in cursive fonts generally use a script style, and the result looks more like handwritten pen or brush writing than printed letterwork. CSS uses the term \"cursive\" to apply to a font for any script, although other names such as Chancery, Brush, Swing and Script are also used in font names. Sample cursive fonts",
           "type": "value",
           "value": "cursive"
         },
@@ -1315,7 +1315,7 @@
         },
         {
           "name": "system-ui",
-          "prose": "This generic font family lets text render with the default user interface font on the platform on which the UA is running. A cross-platform UA should use different fonts on its different supported platforms. The purpose of system-ui is to allow web content to integrate with the look and feel of the native OS. As with other generic font families, the substitution of specific installed fonts for system-ui does not affect the computed style. <div id=\"system-text\" style=\"font-family: system-ui\"></div> ... window.getComputedStyle(document.getElementById(\"system-text\")).getPropertyValue(\"font-family\"); The script above should not have any knowledge of how system-ui is expanded to include a collection of system user interface fonts. In particular, the above script should yield a result of \"system-ui\" on every platform.",
+          "prose": "This generic font family lets text render with the default user interface font (which, as with all § 2.1.5 Generic font families may be a composite font) on the platform on which the UA is running. A cross-platform UA should use different fonts on its different supported platforms. The purpose of system-ui is to allow web content to integrate with the look and feel of the native OS. The precise font used will depend on factors such as Unicode coverage and the content language. As with other generic font families, the substitution of specific installed fonts for system-ui does not affect the computed style. <div id=\"system-text\" style=\"font-family: system-ui\"></div> ... window.getComputedStyle(document.getElementById(\"system-text\")).getPropertyValue(\"font-family\"); The script above should not have any knowledge of how system-ui is expanded to include a collection of system user interface fonts. In particular, the above script should yield a result of \"system-ui\" on every platform.",
           "type": "value",
           "value": "system-ui"
         },
@@ -1330,6 +1330,16 @@
           "value": "generic()",
           "type": "value"
         },
+        {
+          "name": "generic()",
+          "value": "generic()",
+          "type": "value"
+        },
+        {
+          "name": "generic()",
+          "value": "generic()",
+          "type": "value"
+        },
         {
           "name": "ui-serif",
           "prose": "This font family is used for the serif variant of the system’s user interface. The purpose of ui-serif is to allow web content to integrate with the look and feel of the native OS. Sample ui-serif font on macOS Catalina and iOS 13: New York",

package/css-gcpm-4.json

@@ -39,12 +39,11 @@
       "prose": "The element is the first matched element on the page, and neither it nor its ancestors have any previous siblings that appear on the page."
     }
   ],
-  "values": [],
-  "warnings": [
+  "values": [
     {
-      "msg": "Missing definition",
-      "name": "content-list",
-      "value": "element | content | text | attr(<identifier>) | counter() | counters()"
+      "name": "<content-level>",
+      "type": "type",
+      "value": "element | content | text | <attr()> | <counter>"
     }
   ]
 }

package/css-lists.json

@@ -266,13 +266,9 @@
       "type": "type",
       "value": "reversed( <counter-name> )"
     },
-    {
-      "name": "<counter>",
-      "type": "type",
-      "value": "<counter()> | <counters()>"
-    },
     {
       "name": "counter()",
+      "prose": "Counters have no visible effect by themselves, but their values can be used with the counter() and counters() functions, whose used values represent counter values as strings or images. They are defined as follows:",
       "type": "function",
       "value": "counter( <counter-name>, <counter-style>? )",
       "values": [
@@ -286,6 +282,7 @@
     },
     {
       "name": "counters()",
+      "prose": "Counters have no visible effect by themselves, but their values can be used with the counter() and counters() functions, whose used values represent counter values as strings or images. They are defined as follows:",
       "type": "function",
       "value": "counters( <counter-name>, <string>, <counter-style>? )",
       "values": [
@@ -296,6 +293,11 @@
           "value": "list-item"
         }
       ]
+    },
+    {
+      "name": "<counter>",
+      "type": "type",
+      "value": "<counter()> | <counters()>"
     }
   ]
 }

package/css-shapes.json

@@ -126,7 +126,7 @@
         },
         {
           "name": "path()",
-          "value": "path( [<'fill-rule'>,]? <string> )",
+          "value": "path( <'fill-rule'>? , <string> )",
           "type": "function",
           "values": [
             {

package/css-ui.json

@@ -113,7 +113,7 @@
       "values": [
         {
           "name": "<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>.",
+          "prose": "<url-set> is a limited version of image-set(), where the <image> sub-production is restricted to <url> only.",
           "type": "type"
         },
         {

package/css-values.json

@@ -179,97 +179,97 @@
         },
         {
           "name": "vw",
-          "prose": "Equal to 1% of the width of the UA-default viewport size, small viewport size, large viewport size, and dynamic viewport size, respectively. In the example below, if the width of the viewport is 200mm, the font size of h1 elements will be 16mm (i.e. (8×200mm)/100). h1 { font-size: 8vw }",
+          "prose": "Equal to 1% of the width of the large viewport size, small viewport size, large viewport size, and dynamic viewport size, respectively. In the example below, if the width of the viewport is 200mm, the font size of h1 elements will be 16mm (i.e. (8×200mm)/100). h1 { font-size: 8vw }",
           "type": "value",
           "value": "vw"
         },
         {
           "name": "svw",
-          "prose": "Equal to 1% of the width of the UA-default viewport size, small viewport size, large viewport size, and dynamic viewport size, respectively. In the example below, if the width of the viewport is 200mm, the font size of h1 elements will be 16mm (i.e. (8×200mm)/100). h1 { font-size: 8vw }",
+          "prose": "Equal to 1% of the width of the large viewport size, small viewport size, large viewport size, and dynamic viewport size, respectively. In the example below, if the width of the viewport is 200mm, the font size of h1 elements will be 16mm (i.e. (8×200mm)/100). h1 { font-size: 8vw }",
           "type": "value",
           "value": "svw"
         },
         {
           "name": "lvw",
-          "prose": "Equal to 1% of the width of the UA-default viewport size, small viewport size, large viewport size, and dynamic viewport size, respectively. In the example below, if the width of the viewport is 200mm, the font size of h1 elements will be 16mm (i.e. (8×200mm)/100). h1 { font-size: 8vw }",
+          "prose": "Equal to 1% of the width of the large viewport size, small viewport size, large viewport size, and dynamic viewport size, respectively. In the example below, if the width of the viewport is 200mm, the font size of h1 elements will be 16mm (i.e. (8×200mm)/100). h1 { font-size: 8vw }",
           "type": "value",
           "value": "lvw"
         },
         {
           "name": "dvw",
-          "prose": "Equal to 1% of the width of the UA-default viewport size, small viewport size, large viewport size, and dynamic viewport size, respectively. In the example below, if the width of the viewport is 200mm, the font size of h1 elements will be 16mm (i.e. (8×200mm)/100). h1 { font-size: 8vw }",
+          "prose": "Equal to 1% of the width of the large viewport size, small viewport size, large viewport size, and dynamic viewport size, respectively. In the example below, if the width of the viewport is 200mm, the font size of h1 elements will be 16mm (i.e. (8×200mm)/100). h1 { font-size: 8vw }",
           "type": "value",
           "value": "dvw"
         },
         {
           "name": "vh",
-          "prose": "Equal to 1% of the height of the UA-default viewport size, small viewport size, large viewport size, and dynamic viewport size, respectively.",
+          "prose": "Equal to 1% of the height of the large viewport size, small viewport size, large viewport size, and dynamic viewport size, respectively.",
           "type": "value",
           "value": "vh"
         },
         {
           "name": "svh",
-          "prose": "Equal to 1% of the height of the UA-default viewport size, small viewport size, large viewport size, and dynamic viewport size, respectively.",
+          "prose": "Equal to 1% of the height of the large viewport size, small viewport size, large viewport size, and dynamic viewport size, respectively.",
           "type": "value",
           "value": "svh"
         },
         {
           "name": "lvh",
-          "prose": "Equal to 1% of the height of the UA-default viewport size, small viewport size, large viewport size, and dynamic viewport size, respectively.",
+          "prose": "Equal to 1% of the height of the large viewport size, small viewport size, large viewport size, and dynamic viewport size, respectively.",
           "type": "value",
           "value": "lvh"
         },
         {
           "name": "dvh",
-          "prose": "Equal to 1% of the height of the UA-default viewport size, small viewport size, large viewport size, and dynamic viewport size, respectively.",
+          "prose": "Equal to 1% of the height of the large viewport size, small viewport size, large viewport size, and dynamic viewport size, respectively.",
           "type": "value",
           "value": "dvh"
         },
         {
           "name": "vi",
-          "prose": "Equal to 1% of the size of the large viewport size, small viewport size, and dynamic viewport size (respectively) in the box’s inline axis.",
+          "prose": "Equal to 1% of the size of the large viewport size, small viewport size, large viewport size, and dynamic viewport size (respectively) in the box’s inline axis.",
           "type": "value",
           "value": "vi"
         },
         {
           "name": "svi",
-          "prose": "Equal to 1% of the size of the large viewport size, small viewport size, and dynamic viewport size (respectively) in the box’s inline axis.",
+          "prose": "Equal to 1% of the size of the large viewport size, small viewport size, large viewport size, and dynamic viewport size (respectively) in the box’s inline axis.",
           "type": "value",
           "value": "svi"
         },
         {
           "name": "lvi",
-          "prose": "Equal to 1% of the size of the large viewport size, small viewport size, and dynamic viewport size (respectively) in the box’s inline axis.",
+          "prose": "Equal to 1% of the size of the large viewport size, small viewport size, large viewport size, and dynamic viewport size (respectively) in the box’s inline axis.",
           "type": "value",
           "value": "lvi"
         },
         {
           "name": "dvi",
-          "prose": "Equal to 1% of the size of the large viewport size, small viewport size, and dynamic viewport size (respectively) in the box’s inline axis.",
+          "prose": "Equal to 1% of the size of the large viewport size, small viewport size, large viewport size, and dynamic viewport size (respectively) in the box’s inline axis.",
           "type": "value",
           "value": "dvi"
         },
         {
           "name": "vb",
-          "prose": "Equal to 1% of the size of the initial containing block UA-default viewport size, small viewport size, large viewport size, and dynamic viewport size (respectively) in the box’s block axis.",
+          "prose": "Equal to 1% of the size of the initial containing block large viewport size, small viewport size, large viewport size, and dynamic viewport size (respectively) in the box’s block axis.",
           "type": "value",
           "value": "vb"
         },
         {
           "name": "svb",
-          "prose": "Equal to 1% of the size of the initial containing block UA-default viewport size, small viewport size, large viewport size, and dynamic viewport size (respectively) in the box’s block axis.",
+          "prose": "Equal to 1% of the size of the initial containing block large viewport size, small viewport size, large viewport size, and dynamic viewport size (respectively) in the box’s block axis.",
           "type": "value",
           "value": "svb"
         },
         {
           "name": "lvb",
-          "prose": "Equal to 1% of the size of the initial containing block UA-default viewport size, small viewport size, large viewport size, and dynamic viewport size (respectively) in the box’s block axis.",
+          "prose": "Equal to 1% of the size of the initial containing block large viewport size, small viewport size, large viewport size, and dynamic viewport size (respectively) in the box’s block axis.",
           "type": "value",
           "value": "lvb"
         },
         {
           "name": "dvb",
-          "prose": "Equal to 1% of the size of the initial containing block UA-default viewport size, small viewport size, large viewport size, and dynamic viewport size (respectively) in the box’s block axis.",
+          "prose": "Equal to 1% of the size of the initial containing block large viewport size, small viewport size, large viewport size, and dynamic viewport size (respectively) in the box’s block axis.",
           "type": "value",
           "value": "dvb"
         },
@@ -462,7 +462,7 @@
       "name": "<position>",
       "prose": "The <position> value specifies the position of a object area (e.g. background image) inside a positioning area (e.g. background positioning area). It is interpreted as specified for background-position. [CSS3-BACKGROUND]",
       "type": "type",
-      "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> ] ]"
+      "value": "[ [ left | center | right | top | bottom | <length-percentage> ] | [ left | center | right ] && [ top | center | bottom ] | [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ] | [ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ] ]"
     },
     {
       "name": "calc()",

package/package.json

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

package/selectors.json

@@ -374,7 +374,7 @@
     {
       "name": "<combinator>",
       "type": "type",
-      "value": "'>' | '+' | '~' | [ '|' '|' ]"
+      "value": "'>' | '+' | '~'"
     },
     {
       "name": "<wq-name>",