@webref/css 5.4.0 → 5.4.2

package/compat.json

@@ -13,7 +13,7 @@
       "percentages": "N/A",
       "computedValue": "an RGBA color",
       "canonicalOrder": "per grammar",
-      "animationType": "as color",
+      "animationType": "by computed value type",
       "media": "visual",
       "styleDeclaration": [
         "-webkit-text-fill-color",
@@ -30,7 +30,7 @@
       "percentages": "N/A",
       "computedValue": "an RGBA color",
       "canonicalOrder": "per grammar",
-      "animationType": "as color",
+      "animationType": "by computed value type",
       "media": "visual",
       "styleDeclaration": [
         "-webkit-text-stroke-color",

package/css-anchor.json

@@ -4,11 +4,26 @@
     "url": "https://drafts.csswg.org/css-anchor-1/"
   },
   "properties": {
+    "anchor-scroll": {
+      "name": "anchor-scroll",
+      "value": "none | <dashed-ident>",
+      "initial": "none",
+      "appliesTo": "absolutely-positioned elements",
+      "inherited": "no",
+      "percentages": "n/a",
+      "computedValue": "as specified",
+      "canonicalOrder": "per grammar",
+      "animationType": "discrete",
+      "styleDeclaration": [
+        "anchor-scroll",
+        "anchorScroll"
+      ]
+    },
     "anchor-name": {
       "name": "anchor-name",
       "value": "none | <dashed-ident>",
       "initial": "none",
-      "appliesTo": "all elements",
+      "appliesTo": "all elements that generate a principal box",
       "inherited": "no",
       "percentages": "n/a",
       "computedValue": "as specified",

package/css-backgrounds-4.json

@@ -96,12 +96,12 @@
     },
     "border-top-color": {
       "name": "border-top-color",
-      "value": "<color>#",
+      "value": "<color> | <1d-image>",
       "initial": "currentcolor",
       "appliesTo": "all elements",
       "inherited": "no",
       "percentages": "n/a",
-      "computedValue": "the computed color",
+      "computedValue": "the computed color and/or a one-dimensional image function",
       "canonicalOrder": "per grammar",
       "animationType": "see prose",
       "styleDeclaration": [
@@ -111,12 +111,12 @@
     },
     "border-right-color": {
       "name": "border-right-color",
-      "value": "<color>#",
+      "value": "<color> | <1d-image>",
       "initial": "currentcolor",
       "appliesTo": "all elements",
       "inherited": "no",
       "percentages": "n/a",
-      "computedValue": "the computed color",
+      "computedValue": "the computed color and/or a one-dimensional image function",
       "canonicalOrder": "per grammar",
       "animationType": "see prose",
       "styleDeclaration": [
@@ -126,12 +126,12 @@
     },
     "border-bottom-color": {
       "name": "border-bottom-color",
-      "value": "<color>#",
+      "value": "<color> | <1d-image>",
       "initial": "currentcolor",
       "appliesTo": "all elements",
       "inherited": "no",
       "percentages": "n/a",
-      "computedValue": "the computed color",
+      "computedValue": "the computed color and/or a one-dimensional image function",
       "canonicalOrder": "per grammar",
       "animationType": "see prose",
       "styleDeclaration": [
@@ -141,12 +141,12 @@
     },
     "border-left-color": {
       "name": "border-left-color",
-      "value": "<color>#",
+      "value": "<color> | <1d-image>",
       "initial": "currentcolor",
       "appliesTo": "all elements",
       "inherited": "no",
       "percentages": "n/a",
-      "computedValue": "the computed color",
+      "computedValue": "the computed color and/or a one-dimensional image function",
       "canonicalOrder": "per grammar",
       "animationType": "see prose",
       "styleDeclaration": [
@@ -156,7 +156,7 @@
     },
     "border-color": {
       "name": "border-color",
-      "value": "<color>#{1,4}",
+      "value": "[ <color> | <1d-image> ]{1,4}",
       "initial": "see individual properties",
       "appliesTo": "see individual properties",
       "inherited": "see individual properties",

package/css-color.json

@@ -123,7 +123,7 @@
       "value": "hsl | hwb | lch | oklch"
     },
     "<hue-interpolation-method>": {
-      "value": "[ shorter | longer | increasing | decreasing | specified ] hue"
+      "value": "[ shorter | longer | increasing | decreasing ] hue"
     },
     "<color-interpolation-method>": {
       "value": "in [ <rectangular-color-space> | <polar-color-space> <hue-interpolation-method>? ]"

package/css-contain.json

@@ -22,7 +22,7 @@
       "name": "content-visibility",
       "value": "visible | auto | hidden",
       "initial": "visible",
-      "appliesTo": "elements for which layout containment can apply",
+      "appliesTo": "elements for which size containment can apply",
       "inherited": "no",
       "percentages": "n/a",
       "computedValue": "as specified",

package/css-images-4.json

@@ -52,6 +52,10 @@
   },
   "atrules": {},
   "valuespaces": {
+    "<image-set()>": {
+      "prose": "Delivering the most appropriate image resolution for a user’s device can be a difficult task. Ideally, images should be in the same resolution as the device they’re being viewed in, which can vary between users. However, other factors can factor into the decision of which image to send; for example, if the user is on a slow mobile connection, they may prefer to receive lower-res images rather than waiting for a large proper-res image to load. The image-set() function allows an author to ignore most of these issues, simply providing multiple resolutions of an image and letting the UA decide which is most appropriate in a given situation.",
+      "value": "image-set( <image-set-option># )"
+    },
     "<type()>": {
       "value": "type( <string> )"
     },
@@ -70,9 +74,6 @@
     "<image>": {
       "value": "<url> | <image()> | <image-set()> | <cross-fade()> | <element()> | <gradient>"
     },
-    "<image-set()>": {
-      "value": "image-set( <image-set-option># )"
-    },
     "<image-set-option>": {
       "value": "[ <image> | <string> ] [ <resolution> || type(<string>) ]"
     },
@@ -135,6 +136,15 @@
     },
     "<color-stop>": {
       "value": "<color-stop-length> | <color-stop-angle>"
+    },
+    "<1d-image>": {
+      "value": "<stripes()>"
+    },
+    "<stripes()>": {
+      "value": "stripes( <color-stripe># )"
+    },
+    "<color-stripe>": {
+      "value": "<color> && [ <length-percentage> | <flex> ]?"
     }
   }
 }

package/css-ui.json

@@ -50,12 +50,12 @@
     },
     "outline-color": {
       "name": "outline-color",
-      "value": "<color> | invert",
+      "value": "[ <color> | <1d-image> ] | invert",
       "initial": "invert",
       "appliesTo": "all elements",
       "inherited": "no",
       "percentages": "N/A",
-      "computedValue": "The computed value for invert is invert. For <color> values, see [[!CSS-COLOR-4#resolving-color-values]] in [CSS-COLOR-4].",
+      "computedValue": "The computed value for invert is invert. For <color> values, see CSS Color 4 § 14 Resolving <color> Values in [CSS-COLOR-4]. For <1d-image> values, see CSS Images 4 § 4 1D Image Values: the stripes() notation in [CSS-IMAGES-4].",
       "canonicalOrder": "per grammar",
       "animationType": "by computed value",
       "styleDeclaration": [

package/css-values.json

@@ -25,13 +25,13 @@
       "prose": "The <dashed-ident> production is a <custom-ident>, with all the case-sensitivity that implies, with the additional restriction that it must start with two dashes (U+002D HYPHEN-MINUS)."
     },
     "<url()>": {
-      "prose": "Typically, a <url> is written with the url() or src() functional notations:"
+      "prose": "The <url> type, written with the url() and src() functions, represents a URL, which is a pointer to a resource."
     },
     "<src()>": {
-      "prose": "Typically, a <url> is written with the url() or src() functional notations:"
+      "prose": "The <url> type, written with the url() and src() functions, represents a URL, which is a pointer to a resource."
     },
     "<url-modifier>": {
-      "prose": "The url() function supports specifying additional <url-modifier>s, which change the meaning or the interpretation of the URL somehow. A <url-modifier> is either an <ident> or a functional notation."
+      "prose": "<url>s support specifying additional <url-modifier>s, which change the meaning or the interpretation of the URL somehow. A <url-modifier> is either an <ident> or a functional notation."
     },
     "<zero>": {
       "prose": "The value <zero> represents a literal number with the value 0. Expressions that merely evaluate to a <number> with the value 0 (for example, calc(0)) do not match <zero>; only literal <number-token>s do."

package/css-view-transitions.json

@@ -4,8 +4,8 @@
     "url": "https://drafts.csswg.org/css-view-transitions-1/"
   },
   "properties": {
-    "page-transition-tag": {
-      "name": "page-transition-tag",
+    "view-transition-name": {
+      "name": "view-transition-name",
       "value": "none | <custom-ident>",
       "initial": "none",
       "appliesTo": "all elements",
@@ -15,14 +15,14 @@
       "canonicalOrder": "per grammar",
       "animationType": "discrete",
       "styleDeclaration": [
-        "page-transition-tag",
-        "pageTransitionTag"
+        "view-transition-name",
+        "viewTransitionName"
       ]
     }
   },
   "atrules": {},
   "valuespaces": {
-    "<pt-tag-selector>": {
+    "<pt-name-selector>": {
       "value": "'*' | <custom-ident>"
     }
   }

package/package.json

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

package/scroll-animations.json

@@ -141,7 +141,7 @@
     },
     "animation-delay-start": {
       "name": "animation-delay-start",
-      "value": "[ <time> | <timeline-range-name> <percentage> ]",
+      "value": "[ <time> | <timeline-range-name> <percentage> ]#",
       "initial": "0s",
       "appliesTo": "all elements",
       "inherited": "no",
@@ -172,12 +172,13 @@
   },
   "atrules": {},
   "valuespaces": {
+    "<scroll()>": {
+      "prose": "The scroll() functional notation can be used as a value of animation-timeline and specifies a scroll progress timeline. Its syntax is",
+      "value": "scroll( [ <scroller> || <axis> ]? )"
+    },
     "<timeline-range-name>": {
       "prose": "A named timeline range is a named segment of an animation timeline. The start of the segment is represented as 0% progress through the range; the end of the segment is represented as 100% progress through the range. Multiple named timeline ranges can be attached to a given timeline, and multiple such ranges can overlap. For example, the contain range of a view progress timeline overlaps with its cover range. Named timeline ranges are represented by the <timeline-range-name> value type, which indicates a CSS identifier representing one of the predefined named timeline ranges."
     },
-    "<scroll()>": {
-      "value": "scroll( <axis>? <scroller>? )"
-    },
     "<axis>": {
       "value": "block | inline | vertical | horizontal"
     },

package/css-nesting.json

@@ -1,14 +0,0 @@
-{
-  "spec": {
-    "title": "CSS Nesting Module",
-    "url": "https://drafts.csswg.org/css-nesting-1/"
-  },
-  "properties": {},
-  "atrules": {
-    "@nest": {
-      "value": "@nest <selector-list> { <style-block> }",
-      "descriptors": []
-    }
-  },
-  "valuespaces": {}
-}