@webref/css 6.1.0 → 6.2.0

package/CSS.json

@@ -480,39 +480,5 @@
       "name": "<relative-size>",
       "type": "type"
     }
-  ],
-  "warnings": [
-    {
-      "msg": "Dangling value",
-      "name": "thin",
-      "prose": "A thin border.",
-      "type": "value",
-      "value": "thin",
-      "for": "border-bottom-right"
-    },
-    {
-      "msg": "Dangling value",
-      "name": "medium",
-      "prose": "A medium border.",
-      "type": "value",
-      "value": "medium",
-      "for": "border-bottom-right"
-    },
-    {
-      "msg": "Dangling value",
-      "name": "thick",
-      "prose": "A thick border.",
-      "type": "value",
-      "value": "thick",
-      "for": "border-bottom-right"
-    },
-    {
-      "msg": "Dangling value",
-      "name": "<length>",
-      "prose": "The border’s thickness has an explicit value. Explicit border widths cannot be negative.",
-      "type": "value",
-      "value": "<length>",
-      "for": "border-bottom-right"
-    }
   ]
 }

package/css-align.json

@@ -199,8 +199,9 @@
         },
         {
           "name": "legacy",
-          "value": "legacy",
-          "type": "value"
+          "prose": "This keyword causes the value to effectively inherit into descendants. If the legacy keyword appears on its own (without an accompanying left, right, or center keyword): if the inherited value of justify-items includes the legacy keyword, this value computes to the inherited value; otherwise it computes to normal. When justify-self:auto references the value of justify-items, only the alignment keyword, not the legacy keyword, is referenced by it. It exists to implement the legacy alignment behavior of HTML’s <center> element and align attribute.",
+          "type": "value",
+          "value": "legacy"
         }
       ],
       "styleDeclaration": [

package/css-animations-2.json

@@ -46,26 +46,40 @@
     {
       "name": "<single-animation-timeline>",
       "type": "type",
-      "value": "auto | none | <timeline-name>",
+      "value": "auto | none | <custom-ident> | <scroll()> | <view()>",
       "values": [
         {
           "name": "auto",
-          "value": "auto",
-          "type": "value"
+          "prose": "The animation’s timeline is a DocumentTimeline, more specifically the default document timeline.",
+          "type": "value",
+          "value": "auto"
         },
         {
           "name": "none",
           "prose": "The animation is not associated with a timeline.",
           "type": "value",
           "value": "none"
+        },
+        {
+          "name": "<custom-ident>",
+          "prose": "If a named scroll progress timeline or view progress timeline is in scope on this element, use the referenced timeline as defined in Scroll-linked Animations 1 § 4 Named Timeline Scoping. Otherwise the animation is not associated with a timeline.",
+          "type": "value",
+          "value": "<custom-ident>"
+        },
+        {
+          "name": "<scroll()>",
+          "prose": "Use the scroll progress timeline indicated by the given scroll() function. See Scroll-linked Animations 1 § 2.1.1 The scroll() notation.",
+          "type": "value",
+          "value": "<scroll()>"
+        },
+        {
+          "name": "<view()>",
+          "prose": "Use the view progress timeline indicated by the given view() function. See Scroll-linked Animations 1 § 3.2.1 The view() notation.",
+          "type": "value",
+          "value": "<view()>"
         }
       ]
     },
-    {
-      "name": "<timeline-name>",
-      "value": "<custom-ident> | <string>",
-      "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> ] || <single-animation-timeline>",

package/css-break.json

@@ -255,7 +255,7 @@
     },
     {
       "name": "orphans",
-      "value": "<integer [0,∞]>",
+      "value": "<integer [1,∞]>",
       "initial": "2",
       "appliesTo": "block containers that establish an inline formatting context",
       "inherited": "yes",
@@ -269,7 +269,7 @@
     },
     {
       "name": "widows",
-      "value": "<integer [0,∞]>",
+      "value": "<integer [1,∞]>",
       "initial": "2",
       "appliesTo": "block containers that establish an inline formatting context",
       "inherited": "yes",

package/css-fonts.json

@@ -158,7 +158,7 @@
           "value": "italic"
         },
         {
-          "name": "oblique <angle [−90deg,90deg]>?",
+          "name": "oblique <angle [-90deg,90deg]>?",
           "prose": "Controls matching against an oblique face. Positive angles represent a clockwise slant; negative angles represent a counter-clockwise slant. The lack of an <angle> represents 14deg. (Note that a font might internally provide its own mapping for \"oblique\", but the mapping within the font is disregarded.) Fractional and negative values are accepted; however, values less than -90deg or values greater than 90deg are invalid. If no oblique faces exist, and font-synthesis-style has the value auto, a synthetic oblique face will be generated.",
           "type": "value",
           "value": "oblique <angle [-90deg,90deg]>?"
@@ -227,8 +227,9 @@
         },
         {
           "name": "<number [0,∞]>",
-          "value": "<number [0,∞]>",
-          "type": "value"
+          "prose": "Specifies the aspect value used in the calculation below to calculate the adjusted font size: c = ( a / a' ) s where: s = font-size value a = aspect value as specified by the 'font-size-adjust' property a' = aspect value of actual font c = adjusted font-size to use Negative values are invalid. This value applies to any font that is selected but in typical usage it should be based on the aspect value of the first font in the font-family list. If this is specified accurately, the (a/a') term in the formula above is effectively 1 for the first font and no adjustment occurs. If the value is specified inaccurately, text rendered using the first font in the family list will display differently in older user agents that don’t support font-size-adjust.",
+          "type": "value",
+          "value": "<number [0,∞]>"
         }
       ],
       "styleDeclaration": [

package/css-gcpm-4.json

@@ -23,8 +23,8 @@
   "atrules": [],
   "selectors": [
     {
-      "name": ":nth-of-page(n)",
-      "prose": "The element is the nth matched element on the page."
+      "name": ":nth-of-page()",
+      "value": ":nth-of-page(n)"
     },
     {
       "name": ":first-of-page",

package/css-grid.json

@@ -344,7 +344,7 @@
               "value": "<custom-ident>"
             },
             {
-              "name": "[ <integer [−∞,−1]> | <integer [1,∞]> ] && <custom-ident>?",
+              "name": "[ <integer [-∞,-1]> | <integer [1,∞]> ] && <custom-ident>?",
               "prose": "Contributes the Nth grid line to the grid item’s placement. If a negative integer is given, it instead counts in reverse, starting from the end edge of the explicit grid. If a name is given as a <custom-ident>, only lines with that name are counted. If not enough lines with that name exist, all implicit grid lines are assumed to have that name for the purpose of finding this position. An <integer> value of zero makes the declaration invalid.",
               "type": "value",
               "value": "[ <integer [-∞,-1]> | <integer [1,∞]> ] && <custom-ident>?"
@@ -392,7 +392,7 @@
               "value": "<custom-ident>"
             },
             {
-              "name": "[ <integer [−∞,−1]> | <integer [1,∞]> ] && <custom-ident>?",
+              "name": "[ <integer [-∞,-1]> | <integer [1,∞]> ] && <custom-ident>?",
               "prose": "Contributes the Nth grid line to the grid item’s placement. If a negative integer is given, it instead counts in reverse, starting from the end edge of the explicit grid. If a name is given as a <custom-ident>, only lines with that name are counted. If not enough lines with that name exist, all implicit grid lines are assumed to have that name for the purpose of finding this position. An <integer> value of zero makes the declaration invalid.",
               "type": "value",
               "value": "[ <integer [-∞,-1]> | <integer [1,∞]> ] && <custom-ident>?"
@@ -440,7 +440,7 @@
               "value": "<custom-ident>"
             },
             {
-              "name": "[ <integer [−∞,−1]> | <integer [1,∞]> ] && <custom-ident>?",
+              "name": "[ <integer [-∞,-1]> | <integer [1,∞]> ] && <custom-ident>?",
               "prose": "Contributes the Nth grid line to the grid item’s placement. If a negative integer is given, it instead counts in reverse, starting from the end edge of the explicit grid. If a name is given as a <custom-ident>, only lines with that name are counted. If not enough lines with that name exist, all implicit grid lines are assumed to have that name for the purpose of finding this position. An <integer> value of zero makes the declaration invalid.",
               "type": "value",
               "value": "[ <integer [-∞,-1]> | <integer [1,∞]> ] && <custom-ident>?"
@@ -488,7 +488,7 @@
               "value": "<custom-ident>"
             },
             {
-              "name": "[ <integer [−∞,−1]> | <integer [1,∞]> ] && <custom-ident>?",
+              "name": "[ <integer [-∞,-1]> | <integer [1,∞]> ] && <custom-ident>?",
               "prose": "Contributes the Nth grid line to the grid item’s placement. If a negative integer is given, it instead counts in reverse, starting from the end edge of the explicit grid. If a name is given as a <custom-ident>, only lines with that name are counted. If not enough lines with that name exist, all implicit grid lines are assumed to have that name for the purpose of finding this position. An <integer> value of zero makes the declaration invalid.",
               "type": "value",
               "value": "[ <integer [-∞,-1]> | <integer [1,∞]> ] && <custom-ident>?"

package/css-highlight-api.json

@@ -7,8 +7,8 @@
   "atrules": [],
   "selectors": [
     {
-      "name": "::highlight(<custom-highlight-name>)",
-      "prose": "The ::highlight(<custom-highlight-name>) pseudo-element (also known as the custom highlight pseudo-element) represents the portion of a document that is being contained or partially contained in all the ranges of the registered custom highlight with the custom highlight name <custom-highlight-name>, if any. <custom-highlight-name> must be a valid CSS <ident-token>."
+      "name": "::highlight()",
+      "value": "::highlight(<custom-highlight-name>)"
     }
   ],
   "values": [

package/css-images.json

@@ -114,7 +114,7 @@
       "values": [
         {
           "name": "auto",
-          "prose": "The scaling algorithm is UA dependent.",
+          "prose": "The scaling algorithm is UA-dependent.",
           "type": "value",
           "value": "auto"
         },
@@ -132,21 +132,15 @@
         },
         {
           "name": "pixelated",
-          "prose": "The image is scaled in a way that preserves the pixelated nature of the original as much as possible, but allows minor smoothing instead of awkward distortion when necessary. For each axis, independently determine the integer multiple of its natural size that puts it closest to the target size and is greater than zero. Scale it to this integer-multiple-size using nearest neighbor, then scale it the rest of the way to the target size as for smooth.",
+          "prose": "The image is scaled in a way that preserves the pixelation of the original as much as possible, but allows minor smoothing as necessary to avoid distorting the image when the target size is not a clean multiple of the original. For each axis independently, first determine the integer multiple of its natural size that puts it closest to the target size and is greater than zero. Scale it to this integer-multiple-size using nearest neighbor, then scale it the rest of the way to the target size as for smooth.",
           "type": "value",
           "value": "pixelated"
         },
         {
           "name": "crisp-edges",
-          "prose": "The image is scaled in a way that preserves contrast and edges, and which does not smooth colors or introduce blur to the image in the process. The image must be scaled with the nearest neighbor algorithm: treating the original image’s pixel grid as a literal grid of rectangles, scale those to the desired size, then each pixel of the final image takes its color solely from the nearest pixel of the scaled original image.",
+          "prose": "The image is scaled in a way that preserves contrast and edges, and which avoids smoothing colors or introducing blur to the image in the process. This is intended for images such as line drawings. The image may be scaled using nearest neighbor or any other UA-chosen algorithm that does not blur edges or blend colors from the source image. It can, however, detect diagonal or curved lines and render them as such (rather than as jagged-looking “giant pixels”).",
           "type": "value",
           "value": "crisp-edges"
-        },
-        {
-          "name": "nearest neighbor",
-          "prose": "The image must be scaled with the nearest neighbor algorithm: treating the original image’s pixel grid as a literal grid of rectangles, scale those to the desired size, then each pixel of the final image takes its color solely from the nearest pixel of the scaled original image.",
-          "type": "value",
-          "value": "nearest neighbor"
         }
       ],
       "styleDeclaration": [
@@ -183,7 +177,7 @@
       "name": "radial-gradient()",
       "prose": "The radial-gradient() notation specifies a radial gradient by indicating the center of the gradient (where the 0% ellipse will be) and the size and shape of the ending shape (the 100% ellipse). Color stops are given as a list, just as for linear-gradient(). Starting from the gradient center and progressing towards (and potentially beyond) the ending shape, uniformly-scaled concentric ellipses are drawn and colored according to the specified color stops.",
       "type": "function",
-      "value": "radial-gradient( [ <ending-shape> || <size> ]? [ at <position> ]? , <color-stop-list> )",
+      "value": "radial-gradient( [ <rg-ending-shape> || <rg-size> ]? [ at <position> ]? , <color-stop-list> )",
       "values": [
         {
           "name": "<position>",
@@ -192,61 +186,24 @@
           "value": "<position>"
         },
         {
-          "name": "<ending-shape>",
-          "prose": "Can be either circle or ellipse; determines whether the gradient’s ending shape is a circle or an ellipse, respectively. If <ending-shape> is omitted, the ending shape defaults to a circle if the <size> is a single <length>, and to an ellipse otherwise.",
-          "type": "value",
-          "value": "<ending-shape>",
-          "values": [
-            {
-              "name": "circle",
-              "type": "value",
-              "value": "circle"
-            },
-            {
-              "name": "ellipse",
-              "type": "value",
-              "value": "ellipse"
-            }
-          ]
-        },
-        {
-          "name": "<size>",
-          "prose": "Determines the size of the gradient’s ending shape. If omitted it defaults to farthest-corner. It can be given explicitly or by keyword. For the purpose of the keyword definitions, consider the gradient box edges as extending infinitely in both directions, rather than being finite line segments. If the ending-shape is an ellipse, its axises are aligned with the horizontal and vertical axises. Both circle and ellipse gradients accept the following <extent-keyword> values: If <ending-shape> is specified as circle or is omitted, the <size> may be given explicitly as: If <ending-shape> is specified as ellipse or is omitted, <size> may instead be given explicitly as:",
+          "name": "<rg-ending-shape>",
+          "prose": "Can be either circle or ellipse; determines whether the gradient’s ending shape is a circle or an ellipse, respectively. If <rg-ending-shape> is omitted, the ending shape defaults to a circle if the <rg-size> is a single <length>, and to an ellipse otherwise.",
           "type": "value",
-          "value": "<extent-keyword> | <length [0,∞]> | <length-percentage [0,∞]>{2}",
-          "values": [
-            {
-              "name": "closest-side",
-              "prose": "The ending shape is sized so that it exactly meets the side of the gradient box closest to the gradient’s center. If the shape is an ellipse, it exactly meets the closest side in each dimension.",
-              "type": "value",
-              "value": "closest-side"
-            },
-            {
-              "name": "farthest-side",
-              "prose": "Same as closest-side, except the ending shape is sized based on the farthest side(s).",
-              "type": "value",
-              "value": "farthest-side"
-            },
-            {
-              "name": "closest-corner",
-              "prose": "The ending shape is sized so that it passes through the corner of the gradient box closest to the gradient’s center. If the shape is an ellipse, the ending shape is given the same aspect-ratio it would have if closest-side were specified.",
-              "type": "value",
-              "value": "closest-corner"
-            },
-            {
-              "name": "farthest-corner",
-              "prose": "Same as closest-corner, except the ending shape is sized based on the farthest corner. If the shape is an ellipse, the ending shape is given the same aspect ratio it would have if farthest-side were specified.",
-              "type": "value",
-              "value": "farthest-corner"
-            }
-          ]
+          "value": "<rg-ending-shape>"
         },
         {
-          "name": "<extent-keyword>",
-          "prose": "Both circle and ellipse gradients accept the following <extent-keyword> values:",
+          "name": "<rg-size>",
+          "prose": "Determines the size of the gradient’s ending shape. If omitted it defaults to farthest-corner. It can be given explicitly or by keyword. For the purpose of the keyword definitions, consider the gradient box edges as extending infinitely in both directions, rather than being finite line segments. If the ending-shape is an ellipse, its axises are aligned with the horizontal and vertical axises. Both circle and ellipse gradients accept the following <rg-extent-keyword> values: If <rg-ending-shape> is specified as circle or is omitted, the <rg-size> may be given explicitly as: If <rg-ending-shape> is specified as ellipse or is omitted, <rg-size> may instead be given explicitly as:",
           "type": "value",
-          "value": "closest-corner | closest-side | farthest-corner | farthest-side"
-        },
+          "value": "<rg-size>"
+        }
+      ]
+    },
+    {
+      "name": "<rg-size>",
+      "type": "type",
+      "value": "<rg-extent-keyword> | <length [0,∞]> | <length-percentage [0,∞]>{2}",
+      "values": [
         {
           "name": "<length [0,∞]>",
           "prose": "Gives the radius of the circle explicitly. Negative values are invalid.",
@@ -261,6 +218,54 @@
         }
       ]
     },
+    {
+      "name": "<rg-extent-keyword>",
+      "type": "type",
+      "value": "closest-corner | closest-side | farthest-corner | farthest-side",
+      "values": [
+        {
+          "name": "closest-side",
+          "prose": "The ending shape is sized so that it exactly meets the side of the gradient box closest to the gradient’s center. If the shape is an ellipse, it exactly meets the closest side in each dimension.",
+          "type": "value",
+          "value": "closest-side"
+        },
+        {
+          "name": "farthest-side",
+          "prose": "Same as closest-side, except the ending shape is sized based on the farthest side(s).",
+          "type": "value",
+          "value": "farthest-side"
+        },
+        {
+          "name": "closest-corner",
+          "prose": "The ending shape is sized so that it passes through the corner of the gradient box closest to the gradient’s center. If the shape is an ellipse, the ending shape is given the same aspect-ratio it would have if closest-side were specified.",
+          "type": "value",
+          "value": "closest-corner"
+        },
+        {
+          "name": "farthest-corner",
+          "prose": "Same as closest-corner, except the ending shape is sized based on the farthest corner. If the shape is an ellipse, the ending shape is given the same aspect ratio it would have if farthest-side were specified.",
+          "type": "value",
+          "value": "farthest-corner"
+        }
+      ]
+    },
+    {
+      "name": "<rg-ending-shape>",
+      "type": "type",
+      "value": "circle | ellipse",
+      "values": [
+        {
+          "name": "circle",
+          "type": "value",
+          "value": "circle"
+        },
+        {
+          "name": "ellipse",
+          "type": "value",
+          "value": "ellipse"
+        }
+      ]
+    },
     {
       "name": "repeating-linear-gradient()",
       "prose": "In addition to linear-gradient() and radial-gradient(), this specification defines repeating-linear-gradient() and repeating-radial-gradient() values. These notations take the same values and are interpreted the same as their respective non-repeating siblings defined previously.",
@@ -278,60 +283,16 @@
           "value": "<position>"
         },
         {
-          "name": "<ending-shape>",
-          "prose": "Can be either circle or ellipse; determines whether the gradient’s ending shape is a circle or an ellipse, respectively. If <ending-shape> is omitted, the ending shape defaults to a circle if the <size> is a single <length>, and to an ellipse otherwise.",
-          "type": "value",
-          "value": "<ending-shape>",
-          "values": [
-            {
-              "name": "circle",
-              "type": "value",
-              "value": "circle"
-            },
-            {
-              "name": "ellipse",
-              "type": "value",
-              "value": "ellipse"
-            }
-          ]
-        },
-        {
-          "name": "<size>",
-          "prose": "Determines the size of the gradient’s ending shape. If omitted it defaults to farthest-corner. It can be given explicitly or by keyword. For the purpose of the keyword definitions, consider the gradient box edges as extending infinitely in both directions, rather than being finite line segments. If the ending-shape is an ellipse, its axises are aligned with the horizontal and vertical axises. Both circle and ellipse gradients accept the following <extent-keyword> values: If <ending-shape> is specified as circle or is omitted, the <size> may be given explicitly as: If <ending-shape> is specified as ellipse or is omitted, <size> may instead be given explicitly as:",
+          "name": "<rg-ending-shape>",
+          "prose": "Can be either circle or ellipse; determines whether the gradient’s ending shape is a circle or an ellipse, respectively. If <rg-ending-shape> is omitted, the ending shape defaults to a circle if the <rg-size> is a single <length>, and to an ellipse otherwise.",
           "type": "value",
-          "value": "<extent-keyword> | <length [0,∞]> | <length-percentage [0,∞]>{2}",
-          "values": [
-            {
-              "name": "closest-side",
-              "prose": "The ending shape is sized so that it exactly meets the side of the gradient box closest to the gradient’s center. If the shape is an ellipse, it exactly meets the closest side in each dimension.",
-              "type": "value",
-              "value": "closest-side"
-            },
-            {
-              "name": "farthest-side",
-              "prose": "Same as closest-side, except the ending shape is sized based on the farthest side(s).",
-              "type": "value",
-              "value": "farthest-side"
-            },
-            {
-              "name": "closest-corner",
-              "prose": "The ending shape is sized so that it passes through the corner of the gradient box closest to the gradient’s center. If the shape is an ellipse, the ending shape is given the same aspect-ratio it would have if closest-side were specified.",
-              "type": "value",
-              "value": "closest-corner"
-            },
-            {
-              "name": "farthest-corner",
-              "prose": "Same as closest-corner, except the ending shape is sized based on the farthest corner. If the shape is an ellipse, the ending shape is given the same aspect ratio it would have if farthest-side were specified.",
-              "type": "value",
-              "value": "farthest-corner"
-            }
-          ]
+          "value": "<rg-ending-shape>"
         },
         {
-          "name": "<extent-keyword>",
-          "prose": "Both circle and ellipse gradients accept the following <extent-keyword> values:",
+          "name": "<rg-size>",
+          "prose": "Determines the size of the gradient’s ending shape. If omitted it defaults to farthest-corner. It can be given explicitly or by keyword. For the purpose of the keyword definitions, consider the gradient box edges as extending infinitely in both directions, rather than being finite line segments. If the ending-shape is an ellipse, its axises are aligned with the horizontal and vertical axises. Both circle and ellipse gradients accept the following <rg-extent-keyword> values: If <rg-ending-shape> is specified as circle or is omitted, the <rg-size> may be given explicitly as: If <rg-ending-shape> is specified as ellipse or is omitted, <rg-size> may instead be given explicitly as:",
           "type": "value",
-          "value": "closest-corner | closest-side | farthest-corner | farthest-side"
+          "value": "<rg-size>"
         }
       ]
     },

package/css-link-params.json

@@ -0,0 +1,32 @@
+{
+  "spec": {
+    "title": "CSS Linked Parameters",
+    "url": "https://drafts.csswg.org/css-link-params-1/"
+  },
+  "properties": [
+    {
+      "name": "link-parameters",
+      "value": "none | <link-param>+",
+      "initial": "none",
+      "appliesTo": "all elements and pseudo-elements",
+      "inherited": "no",
+      "percentages": "n/a",
+      "computedValue": "as specified",
+      "canonicalOrder": "per grammar",
+      "animationType": "discrete",
+      "styleDeclaration": [
+        "link-parameters",
+        "linkParameters"
+      ]
+    }
+  ],
+  "atrules": [],
+  "selectors": [],
+  "values": [
+    {
+      "name": "<link-param>",
+      "type": "type",
+      "value": "param( <custom-property-name> <declaration-value>? )"
+    }
+  ]
+}