@webref/css 6.11.1 → 6.12.0

package/css-anchor-position.json

@@ -73,7 +73,7 @@
         },
         {
           "name": "<inset-area>",
-          "prose": "If the element does not have a default anchor element, or is not an absolutely-positioned element, this value has no effect. Otherwise, the property selects a region of the inset-area grid, and makes that the element’s containing block. Additionally, the normal value for the self-alignment properties behaves as either start, end, or anchor-center, depending on the positioning of the region, to give a good default alignment for the positioned element. See § 3.1.1 Resolving <inset-area-span>s for details on both of these effects. If the two <inset-area-span>s do not define a valid region, this property is invalid. Also, any auto inset properties resolve to 0.",
+          "prose": "If the element does not have a default anchor element, or is not an absolutely-positioned element, this value has no effect. Otherwise, the property selects a region of the inset-area grid, and makes that the element’s containing block. Additionally, the normal value for the self-alignment properties behaves as either start, end, or anchor-center, depending on the positioning of the region, to give a good default alignment for the positioned element. See § 3.1.1 Resolving <inset-area>s for details on both of these effects. If the two <inset-area-span>s do not define a valid region, this property is invalid. Also, any auto inset properties resolve to 0.",
           "href": "https://drafts.csswg.org/css-anchor-position-1/#valdef-inset-area-inset-area",
           "type": "value",
           "value": "<inset-area>"
@@ -155,7 +155,7 @@
     {
       "name": "position-try-options",
       "href": "https://drafts.csswg.org/css-anchor-position-1/#propdef-position-try-options",
-      "value": "none | [ <dashed-ident> | <try-tactic> ]#",
+      "value": "none | [ <dashed-ident> || <try-tactic> ]#",
       "initial": "none",
       "appliesTo": "absolutely-positioned elements",
       "inherited": "no",
@@ -210,6 +210,13 @@
           "href": "https://drafts.csswg.org/css-anchor-position-1/#valdef-position-try-options-flip-start",
           "type": "value",
           "value": "flip-start"
+        },
+        {
+          "name": "<dashed-ident> || <try-tactic>",
+          "prose": "Combines the effects of the previous two options: if there is a @position-try rule with the given name, then applies its position option to the element’s base style, transforms it according to the specified <try-tactic>, and then adds the result to the element’s position options list. Otherwise, does nothing.",
+          "href": "https://drafts.csswg.org/css-anchor-position-1/#valdef-position-try-options-dashed-ident--try-tactic",
+          "type": "value",
+          "value": "<dashed-ident> || <try-tactic>"
         }
       ],
       "styleDeclaration": [
@@ -238,28 +245,28 @@
         },
         {
           "name": "most-width",
-          "prose": "For each entry in the position options list, determine the position fallback styles, and find the specified inset-modified containing block size that results from those styles. Stably sort the position options list according to this size, with the largest coming first.",
+          "prose": "For each entry in the position options list, apply a position option using that option to the element, and find the specified inset-modified containing block size that results from those styles. Stably sort the position options list according to this size, with the largest coming first.",
           "href": "https://drafts.csswg.org/css-anchor-position-1/#valdef-position-try-order-most-width",
           "type": "value",
           "value": "most-width"
         },
         {
           "name": "most-height",
-          "prose": "For each entry in the position options list, determine the position fallback styles, and find the specified inset-modified containing block size that results from those styles. Stably sort the position options list according to this size, with the largest coming first.",
+          "prose": "For each entry in the position options list, apply a position option using that option to the element, and find the specified inset-modified containing block size that results from those styles. Stably sort the position options list according to this size, with the largest coming first.",
           "href": "https://drafts.csswg.org/css-anchor-position-1/#valdef-position-try-order-most-height",
           "type": "value",
           "value": "most-height"
         },
         {
           "name": "most-block-size",
-          "prose": "For each entry in the position options list, determine the position fallback styles, and find the specified inset-modified containing block size that results from those styles. Stably sort the position options list according to this size, with the largest coming first.",
+          "prose": "For each entry in the position options list, apply a position option using that option to the element, and find the specified inset-modified containing block size that results from those styles. Stably sort the position options list according to this size, with the largest coming first.",
           "href": "https://drafts.csswg.org/css-anchor-position-1/#valdef-position-try-order-most-block-size",
           "type": "value",
           "value": "most-block-size"
         },
         {
           "name": "most-inline-size",
-          "prose": "For each entry in the position options list, determine the position fallback styles, and find the specified inset-modified containing block size that results from those styles. Stably sort the position options list according to this size, with the largest coming first.",
+          "prose": "For each entry in the position options list, apply a position option using that option to the element, and find the specified inset-modified containing block size that results from those styles. Stably sort the position options list according to this size, with the largest coming first.",
           "href": "https://drafts.csswg.org/css-anchor-position-1/#valdef-position-try-order-most-inline-size",
           "type": "value",
           "value": "most-inline-size"
@@ -270,6 +277,22 @@
         "positionTryOrder"
       ]
     },
+    {
+      "name": "position-try",
+      "href": "https://drafts.csswg.org/css-anchor-position-1/#propdef-position-try",
+      "value": "<'position-try-order'>? <'position-try-options'>",
+      "initial": "see individual properties",
+      "appliesTo": "see individual properties",
+      "inherited": "see individual properties",
+      "percentages": "see individual properties",
+      "computedValue": "see individual properties",
+      "animationType": "see individual properties",
+      "canonicalOrder": "per grammar",
+      "styleDeclaration": [
+        "position-try",
+        "positionTry"
+      ]
+    },
     {
       "name": "position-fallback-bounds",
       "href": "https://drafts.csswg.org/css-anchor-position-1/#propdef-position-fallback-bounds",
@@ -294,6 +317,38 @@
         "position-fallback-bounds",
         "positionFallbackBounds"
       ]
+    },
+    {
+      "name": "position-animation",
+      "href": "https://drafts.csswg.org/css-anchor-position-1/#propdef-position-animation",
+      "value": "normal | magic",
+      "initial": "normal",
+      "appliesTo": "absolutely positioned elements",
+      "inherited": "no",
+      "percentages": "n/a",
+      "computedValue": "normal, or an overriding position rectangle (see prose)",
+      "canonicalOrder": "per grammar",
+      "animationType": "(see prose)",
+      "values": [
+        {
+          "name": "normal",
+          "prose": "This value has no effect.",
+          "href": "https://drafts.csswg.org/css-anchor-position-1/#valdef-position-animation-normal",
+          "type": "value",
+          "value": "normal"
+        },
+        {
+          "name": "magic",
+          "prose": "At computed value time, resolves to a overriding position rectangle, using interleaving. At used value time, overrides the position and size of the element’s margin box, setting it to match the computed overriding position rectangle.",
+          "href": "https://drafts.csswg.org/css-anchor-position-1/#valdef-position-animation-magic",
+          "type": "value",
+          "value": "magic"
+        }
+      ],
+      "styleDeclaration": [
+        "position-animation",
+        "positionAnimation"
+      ]
     }
   ],
   "atrules": [

package/css-color-5.json

@@ -359,12 +359,6 @@
       "type": "type",
       "value": "[<custom-params> | <predefined-rgb-params> | <xyz-params>]"
     },
-    {
-      "name": "<custom-params>",
-      "href": "https://drafts.csswg.org/css-color-5/#typedef-custom-params",
-      "type": "type",
-      "value": "<dashed-ident> [ <number> | <percentage> | none ]+"
-    },
     {
       "name": "<predefined-rgb-params>",
       "href": "https://drafts.csswg.org/css-color-5/#typedef-predefined-rgb-params",
@@ -383,12 +377,6 @@
       "type": "type",
       "value": "<xyz> [ <number> | <percentage> | none ]{3}"
     },
-    {
-      "name": "<xyz>",
-      "href": "https://drafts.csswg.org/css-color-5/#typedef-xyz",
-      "type": "type",
-      "value": "xyz | xyz-d50 | xyz-d65"
-    },
     {
       "name": "device-cmyk()",
       "href": "https://drafts.csswg.org/css-color-5/#funcdef-device-cmyk",
@@ -419,6 +407,12 @@
       "type": "function",
       "value": "light-dark( <color>, <color> )"
     },
+    {
+      "name": "contrast-color()",
+      "href": "https://drafts.csswg.org/css-color-5/#funcdef-contrast-color",
+      "type": "function",
+      "value": "contrast-color( <color> max? )"
+    },
     {
       "name": "<color-space>",
       "href": "https://drafts.csswg.org/css-color-5/#typedef-color-space",

package/css-color-hdr.json

@@ -0,0 +1,117 @@
+{
+  "spec": {
+    "title": "CSS Color HDR Module Level 1",
+    "url": "https://drafts.csswg.org/css-color-hdr/"
+  },
+  "properties": [
+    {
+      "name": "dynamic-range-limit",
+      "href": "https://drafts.csswg.org/css-color-hdr/#propdef-dynamic-range-limit",
+      "value": "standard | high | constrained-high",
+      "initial": "high",
+      "appliesTo": "all elements",
+      "inherited": "no",
+      "percentages": "n/a",
+      "computedValue": "specified value",
+      "canonicalOrder": "per grammar",
+      "animationType": "by dynamic-range-limit-mix()",
+      "values": [
+        {
+          "name": "standard",
+          "prose": "The highest luminance color that is displayed is the same as ' media white, i.e. the CSS color white.",
+          "href": "https://drafts.csswg.org/css-color-hdr/#valdef-dynamic-range-limit-standard",
+          "type": "value",
+          "value": "standard"
+        },
+        {
+          "name": "high",
+          "prose": "The highest peak luminance that is displayed is much greater than media white, i.e. the CSS color white; the precise level is not specified.",
+          "href": "https://drafts.csswg.org/css-color-hdr/#valdef-dynamic-range-limit-high",
+          "type": "value",
+          "value": "high"
+        },
+        {
+          "name": "constrained-high",
+          "prose": "The highest peak luminance that is displayed is somewhat greater than media white, i.e. the CSS color white, such that a mix of SDR and HDR content can be comfortably viewed together.",
+          "href": "https://drafts.csswg.org/css-color-hdr/#valdef-dynamic-range-limit-constrained-high",
+          "type": "value",
+          "value": "constrained-high"
+        }
+      ],
+      "styleDeclaration": [
+        "dynamic-range-limit",
+        "dynamicRangeLimit"
+      ]
+    }
+  ],
+  "atrules": [],
+  "selectors": [],
+  "values": [
+    {
+      "name": "dynamic-range-limit-mix()",
+      "href": "https://drafts.csswg.org/css-color-hdr/#funcdef-dynamic-range-limit-mix",
+      "type": "function",
+      "value": "dynamic-range-limit-mix( [ <ident> && <percentage [0,100]>? ]#{2})"
+    },
+    {
+      "name": "color()",
+      "href": "https://drafts.csswg.org/css-color-hdr/#funcdef-color",
+      "type": "function",
+      "value": "color( [from <color>]? <colorspace-params> [ / [ <alpha-value> | none ] ]? )"
+    },
+    {
+      "name": "<colorspace-params>",
+      "href": "https://drafts.csswg.org/css-color-hdr/#typedef-colorspace-params",
+      "type": "type",
+      "value": "[<custom-params> | <predefined-rgb-params> | <predefined-polar-params> | <predefined-rectangular-params> | <xyz-params>]"
+    },
+    {
+      "name": "<custom-params>",
+      "href": "https://drafts.csswg.org/css-color-hdr/#typedef-custom-params",
+      "type": "type",
+      "value": "<dashed-ident> [ <number> | <percentage> | none ]+"
+    },
+    {
+      "name": "<predefined-rgb-params>",
+      "href": "https://drafts.csswg.org/css-color-hdr/#typedef-predefined-rgb-params",
+      "type": "type",
+      "value": "<predefined-rgb> [ <number> | <percentage> | none ]{3}"
+    },
+    {
+      "name": "<predefined-polar-params>",
+      "href": "https://drafts.csswg.org/css-color-hdr/#typedef-predefined-polar-params",
+      "type": "type",
+      "value": "jzczhz [ <number> | <percentage> | none ]{2} [ <hue> | none]"
+    },
+    {
+      "name": "<predefined-rectangular-params>",
+      "href": "https://drafts.csswg.org/css-color-hdr/#typedef-predefined-rectangular-params",
+      "type": "type",
+      "value": "<predefined-rectangular> [ <number> | <percentage> | none ]{3}"
+    },
+    {
+      "name": "<predefined-rgb>",
+      "href": "https://drafts.csswg.org/css-color-hdr/#typedef-predefined-rgb",
+      "type": "type",
+      "value": "srgb | srgb-linear | display-p3 | a98-rgb | prophoto-rgb | rec2020 | rec2100-pq | rec2100-hlg | rec2100-linear"
+    },
+    {
+      "name": "<predefined-rectangular>",
+      "href": "https://drafts.csswg.org/css-color-hdr/#typedef-predefined-rectangular",
+      "type": "type",
+      "value": "jzazbz | ictcp"
+    },
+    {
+      "name": "<xyz-params>",
+      "href": "https://drafts.csswg.org/css-color-hdr/#typedef-xyz-params",
+      "type": "type",
+      "value": "<xyz> [ <number> | <percentage> | none ]{3}"
+    },
+    {
+      "name": "<xyz>",
+      "href": "https://drafts.csswg.org/css-color-hdr/#typedef-xyz",
+      "type": "type",
+      "value": "xyz | xyz-d50 | xyz-d65"
+    }
+  ]
+}

package/css-color.json

@@ -35,7 +35,8 @@
           "name": "<opacity-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 are preserved in specified values, but are clamped to the range [0, 1] in computed values.",
           "href": "https://drafts.csswg.org/css-color-4/#typedef-opacity-opacity-value",
-          "type": "type"
+          "type": "type",
+          "value": "<number> | <percentage>"
         }
       ],
       "styleDeclaration": [
@@ -1460,101 +1461,6 @@
         }
       ]
     },
-    {
-      "name": "color()",
-      "href": "https://drafts.csswg.org/css-color-4/#funcdef-color",
-      "type": "function",
-      "value": "color( <colorspace-params> [ / [ <alpha-value> | none ] ]? )",
-      "values": [
-        {
-          "name": "srgb",
-          "prose": "The srgb [SRGB] color space accepts three numeric parameters, representing the red, green, and blue channels of the color. In-gamut colors have all three components in the range [0, 1]. The whitepoint is D65. [SRGB] specifies two viewing conditions, encoding and typical. The [ICC] recommends using the encoding conditions for color conversion and for optimal viewing, which are the values in the table below. sRGB is the default color space for CSS, used for all the legacy color functions. It has the following characteristics: x y Red chromaticity 0.640 0.330 Green chromaticity 0.300 0.600 Blue chromaticity 0.150 0.060 White chromaticity D65 Transfer function see below White luminance 80.0 cd/m Black luminance 0.20 cd/m Image state display-referred Percentages Allowed for R, G and B Percent reference range for R,G,B: 0% = 0.0, 100% = 1.0 let sign = c < 0? -1 : 1; let abs = Math.abs(c); if (abs <= 0.04045) { cl = c / 12.92; } else { cl = sign * (Math.pow((abs + 0.055) / 1.055, 2.4)); } c is the gamma-encoded red, green or blue component. cl is the corresponding linear-light component. Visualization of the sRGB color space in LCH. The primaries and secondaries are shown.",
-          "href": "https://drafts.csswg.org/css-color-4/#valdef-color-srgb",
-          "type": "value",
-          "value": "srgb"
-        },
-        {
-          "name": "srgb-linear",
-          "prose": "The srgb-linear [SRGB] color space accepts three numeric parameters, representing the red, green, and blue channels of the color. In-gamut colors have all three components in the range [0, 1]. The whitepoint is D65. It has the following characteristics: x y Red chromaticity 0.640 0.330 Green chromaticity 0.300 0.600 Blue chromaticity 0.150 0.060 White chromaticity D65 Transfer function unity, see below White luminance 80.0 cd/m Black luminance 0.20 cd/m Image state display-referred Percentages Allowed for R, G and B Percent reference range for R,G,B: 0% = 0.0, 100% = 1.0 cl = c; c is the red, green or blue component. cl is the corresponding linear-light component, which is identical. To avoid banding artifacts, a higher precision is required for srgb-linear than for srgb. For example, these are the same color color(srgb 0.691 0.139 0.259) color(srgb-linear 0.435 0.017 0.055)",
-          "href": "https://drafts.csswg.org/css-color-4/#valdef-color-srgb-linear",
-          "type": "value",
-          "value": "srgb-linear"
-        },
-        {
-          "name": "display-p3",
-          "prose": "The display-p3 [Display-P3] color space accepts three numeric parameters, representing the red, green, and blue channels of the color. In-gamut colors have all three components in the range [0, 1]. It uses the same primary chromaticities as [DCI-P3], but with a D65 whitepoint, and the same transfer curve as sRGB. Modern displays, TVs, laptop screens and phone screens are able to display all, or nearly all, of the display-p3 gamut. It has the following characteristics: x y Red chromaticity 0.680 0.320 Green chromaticity 0.265 0.690 Blue chromaticity 0.150 0.060 White chromaticity D65 Transfer function same as srgb White luminance 80.0 cd/m Black luminance 0.80 cd/m Image state display-referred Percentages Allowed for R, G and B Percent reference range for R,G,B: 0% = 0.0, 100% = 1.0 Visualization of the P3 color space in LCH. The primaries and secondaries are shown (but in sRGB, not in the correct colors). For comparison, the sRGB primaries and secondaries are also shown, as dashed circles. P3 primaries have higher Chroma.",
-          "href": "https://drafts.csswg.org/css-color-4/#valdef-color-display-p3",
-          "type": "value",
-          "value": "display-p3"
-        },
-        {
-          "name": "a98-rgb",
-          "prose": "The a98-rgb color space accepts three numeric parameters, representing the red, green, and blue channels of the color. In-gamut colors have all three components in the range [0, 1]. The transfer curve is a gamma function, close to but not exactly 1/2.2. It has the following characteristics: x y Red chromaticity 0.6400 0.3300 Green chromaticity 0.2100 0.7100 Blue chromaticity 0.1500 0.0600 White chromaticity D65 Transfer function 256/563 White luminance 160.0 cd/m Black luminance 0.5557 cd/m Image state display-referred Percentages Allowed for R, G and B Percent reference range for R,G,B: 0% = 0.0, 100% = 1.0 Visualization of the A98 color space in LCH. The primaries and secondaries are shown (but in sRGB, not in the correct colors). For comparison, the sRGB primaries and secondaries are also shown, as dashed circles. a98 primaries have higher Chroma, especially the yellow, green and cyan.",
-          "href": "https://drafts.csswg.org/css-color-4/#valdef-color-a98-rgb",
-          "type": "value",
-          "value": "a98-rgb"
-        },
-        {
-          "name": "prophoto-rgb",
-          "prose": "The prophoto-rgb color space accepts three numeric parameters, representing the red, green, and blue channels of the color. In-gamut colors have all three components in the range [0, 1]. The transfer curve is a gamma function with a value of 1/1.8, and a small linear portion near black. The white point is D50, the same as is used by CIE Lab. Thus, conversion to CIE Lab does not require the chromatic adaptation step. The ProPhoto RGB space uses hyper-saturated, non physically realizable primaries. These were chosen to allow a wide color gamut and in particular, to minimize hue shifts under tonal manipulation. It is often used in digital photography as a wide gamut color space for the archival version of photographic images. The prophoto-rgb color space allows CSS to specify colors that will match colors in such images having the same RGB values. The ProPhoto RGB space was originally developed by Kodak and is described in [Wolfe]. It was standardized by ISO as [ROMM],[ROMM-RGB]. The white luminance is given as a range, and the viewing flare (and thus, the black luminance) is 0.5% to 1.0% of this. It has the following characteristics: x y Red chromaticity 0.734699 0.265301 Green chromaticity 0.159597 0.840403 Blue chromaticity 0.036598 0.000105 White chromaticity D50 Transfer function see below White luminance 160.0 to 640.0 cd/m Black luminance See text Image state display-referred Percentages Allowed for R, G and B Percent reference range for R,G,B: 0% = 0.0, 100% = 1.0 const E = 16/512; let sign = c < 0? -1 : 1; let abs = Math.abs(c); if (abs <= E) { cl = c / 16; } else { cl = sign * Math.pow(c, 1.8); } c is the gamma-encoded red, green or blue component. cl is the corresponding linear-light component. Visualization of the prophoto-rgb color space in LCH. The primaries and secondaries are shown (but in sRGB, not in the correct colors). For comparison, the sRGB primaries and secondaries are also shown, as dashed circles. prophoto-rgb primaries and secondaries have much higher Chroma, but much of this ultrawide gamut does not correspond to physically realizable colors.",
-          "href": "https://drafts.csswg.org/css-color-4/#valdef-color-prophoto-rgb",
-          "type": "value",
-          "value": "prophoto-rgb"
-        },
-        {
-          "name": "rec2020",
-          "prose": "The rec2020 [Rec.2020] color space accepts three numeric parameters, representing the red, green, and blue channels of the color. In-gamut colors have all three components in the range [0, 1], (\"full-range\", in video terminology). ITU Reference 2020 is used for Ultra High Definition, 4k and 8k television. The primaries are physically realizable, but with difficulty as they lie very close to the spectral locus. Current displays are unable to reproduce the full gamut of rec2020. Coverage is expected to increase over time as displays improve. It has the following characteristics: x y Red chromaticity 0.708 0.292 Green chromaticity 0.170 0.797 Blue chromaticity 0.131 0.046 White chromaticity D65 Transfer function see below, from [Rec.2020] table 4 Image state display-referred Percentages Allowed for R, G and B Percent reference range for R,G,B: 0% = 0.0, 100% = 1.0 const α = 1.09929682680944 ; const β = 0.018053968510807; let sign = c < 0? -1 : 1; let abs = Math.abs(c); if (abs < β * 4.5 ) { cl = c / 4.5; } else { cl = sign * (Math.pow((abs + α -1 ) / α, 1/0.45)); } c is the gamma-encoded red, green or blue component. cl is the corresponding linear-light component. Visualization of the rec2020 color space in LCH. The primaries and secondaries are shown (but in sRGB, not in the correct colors). For comparison, the sRGB primaries and secondaries are also shown, as dashed circles. rec2020 primaries have much higher Chroma.",
-          "href": "https://drafts.csswg.org/css-color-4/#valdef-color-rec2020",
-          "type": "value",
-          "value": "rec2020"
-        },
-        {
-          "name": "xyz-d50",
-          "prose": "The xyz color space accepts three numeric parameters, representing the X,Y and Z values. It represents the CIE XYZ [COLORIMETRY] color space, scaled such that diffuse white has a luminance (Y) of 1.0. and, if necessary, chromatically adapted to the reference white. The reference white for xyz-d50 is D50, while the reference white for xyz-d65 and xyz is D65. Values greater than 1.0/100% are allowed and must not be clamped; they represent colors brighter than diffuse white. Values less than 0/0% are uncommon, but can occur as a result of chromatic adaptation, and likewise must not be clamped. It has the following characteristics: Percentages Allowed for X,Y,Z Percent reference range for X,Y,Z: 0% = 0.0, 100% = 1.0 These are exactly equivalent: #7654CD rgb(46.27% 32.94% 80.39%) lab(44.36% 36.05 -58.99) color(xyz-d50 0.2005 0.14089 0.4472) color(xyz-d65 0.21661 0.14602 0.59452)",
-          "href": "https://drafts.csswg.org/css-color-4/#valdef-color-xyz-d50",
-          "type": "value",
-          "value": "xyz-d50"
-        },
-        {
-          "name": "xyz-d65",
-          "prose": "The xyz color space accepts three numeric parameters, representing the X,Y and Z values. It represents the CIE XYZ [COLORIMETRY] color space, scaled such that diffuse white has a luminance (Y) of 1.0. and, if necessary, chromatically adapted to the reference white. The reference white for xyz-d50 is D50, while the reference white for xyz-d65 and xyz is D65. Values greater than 1.0/100% are allowed and must not be clamped; they represent colors brighter than diffuse white. Values less than 0/0% are uncommon, but can occur as a result of chromatic adaptation, and likewise must not be clamped. It has the following characteristics: Percentages Allowed for X,Y,Z Percent reference range for X,Y,Z: 0% = 0.0, 100% = 1.0 These are exactly equivalent: #7654CD rgb(46.27% 32.94% 80.39%) lab(44.36% 36.05 -58.99) color(xyz-d50 0.2005 0.14089 0.4472) color(xyz-d65 0.21661 0.14602 0.59452)",
-          "href": "https://drafts.csswg.org/css-color-4/#valdef-color-xyz-d65",
-          "type": "value",
-          "value": "xyz-d65"
-        },
-        {
-          "name": "xyz",
-          "prose": "The xyz color space accepts three numeric parameters, representing the X,Y and Z values. It represents the CIE XYZ [COLORIMETRY] color space, scaled such that diffuse white has a luminance (Y) of 1.0. and, if necessary, chromatically adapted to the reference white. The reference white for xyz-d50 is D50, while the reference white for xyz-d65 and xyz is D65. Values greater than 1.0/100% are allowed and must not be clamped; they represent colors brighter than diffuse white. Values less than 0/0% are uncommon, but can occur as a result of chromatic adaptation, and likewise must not be clamped. It has the following characteristics: Percentages Allowed for X,Y,Z Percent reference range for X,Y,Z: 0% = 0.0, 100% = 1.0 These are exactly equivalent: #7654CD rgb(46.27% 32.94% 80.39%) lab(44.36% 36.05 -58.99) color(xyz-d50 0.2005 0.14089 0.4472) color(xyz-d65 0.21661 0.14602 0.59452)",
-          "href": "https://drafts.csswg.org/css-color-4/#valdef-color-xyz",
-          "type": "value",
-          "value": "xyz"
-        }
-      ]
-    },
-    {
-      "name": "<colorspace-params>",
-      "href": "https://drafts.csswg.org/css-color-4/#typedef-colorspace-params",
-      "type": "type",
-      "value": "[ <predefined-rgb-params> | <xyz-params>]"
-    },
-    {
-      "name": "<predefined-rgb-params>",
-      "href": "https://drafts.csswg.org/css-color-4/#typedef-predefined-rgb-params",
-      "type": "type",
-      "value": "<predefined-rgb> [ <number> | <percentage> | none ]{3}"
-    },
-    {
-      "name": "<predefined-rgb>",
-      "href": "https://drafts.csswg.org/css-color-4/#typedef-predefined-rgb",
-      "type": "type",
-      "value": "srgb | srgb-linear | display-p3 | a98-rgb | prophoto-rgb | rec2020"
-    },
-    {
-      "name": "<xyz-params>",
-      "href": "https://drafts.csswg.org/css-color-4/#typedef-xyz-params",
-      "type": "type",
-      "value": "<xyz-space> [ <number> | <percentage> | none ]{3}"
-    },
     {
       "name": "<xyz-space>",
       "href": "https://drafts.csswg.org/css-color-4/#typedef-xyz-space",

package/css-display.json

@@ -31,47 +31,9 @@
     {
       "name": "order",
       "href": "https://drafts.csswg.org/css-display-4/#propdef-order",
-      "value": "[ <'layout-order'> <'reading-order'>? ] | [ [ reading || layout ] && <integer> ]",
-      "initial": "see individual properties",
-      "appliesTo": "flex items and grid items",
-      "inherited": "no",
-      "percentages": "see individual properties",
-      "computedValue": "see individual properties",
-      "animationType": "see individual properties",
-      "canonicalOrder": "per grammar",
-      "values": [
-        {
-          "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).",
-          "href": "https://drafts.csswg.org/css-display-4/#valdef-order-integer",
-          "type": "value",
-          "value": "<integer>"
-        },
-        {
-          "name": "layout",
-          "prose": "Indicates setting layout-order to the specified integer. If reading is not specified, reading-order is set to its initial value.",
-          "href": "https://drafts.csswg.org/css-display-4/#valdef-order-layout",
-          "type": "value",
-          "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.",
-          "href": "https://drafts.csswg.org/css-display-4/#valdef-order-reading",
-          "type": "value",
-          "value": "reading"
-        }
-      ],
-      "styleDeclaration": [
-        "order"
-      ]
-    },
-    {
-      "name": "reading-order",
-      "href": "https://drafts.csswg.org/css-display-4/#propdef-reading-order",
       "value": "<integer>",
       "initial": "0",
-      "appliesTo": "all elements",
+      "appliesTo": "flex items and grid items",
       "inherited": "no",
       "percentages": "n/a",
       "computedValue": "specified integer",
@@ -80,40 +42,74 @@
       "values": [
         {
           "name": "<integer>",
-          "prose": "The reading-order property controls the order in which elements are rendered to speech or are navigated to when using (linear) sequential navigation methods. It takes a single <integer> value, which specifies which ordinal group the item belongs to. Sibling elements are ordered starting from the lowest numbered ordinal group and going up; elements with the same ordinal group are keep the order they appear in the source document.",
-          "href": "https://drafts.csswg.org/css-display-4/#valdef-reading-order-integer",
+          "prose": "Specifically, the order property controls the order in which flex items or grid items appear within their container, by assigning them to ordinal groups. It takes a single <integer> value, which specifies which ordinal group the item belongs to.",
+          "href": "https://drafts.csswg.org/css-display-4/#valdef-order-integer",
           "type": "value",
           "value": "<integer>"
         }
       ],
       "styleDeclaration": [
-        "reading-order",
-        "readingOrder"
+        "order"
       ]
     },
     {
-      "name": "layout-order",
-      "href": "https://drafts.csswg.org/css-display-4/#propdef-layout-order",
-      "value": "<integer>",
-      "initial": "0",
-      "appliesTo": "flex items and grid items",
+      "name": "reading-order-items",
+      "href": "https://drafts.csswg.org/css-display-4/#propdef-reading-order-items",
+      "value": "normal | flex-visual | flex-flow | grid-rows | grid-columns | grid-order",
+      "initial": "normal",
+      "appliesTo": "flex and grid containers",
       "inherited": "no",
       "percentages": "n/a",
-      "computedValue": "specified integer",
+      "computedValue": "as specified",
       "canonicalOrder": "per grammar",
-      "animationType": "by computed value type",
+      "animationType": "not animatable",
       "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.",
-          "href": "https://drafts.csswg.org/css-display-4/#valdef-layout-order-integer",
+          "name": "normal",
+          "prose": "Follow the order of elements in the DOM.",
+          "href": "https://drafts.csswg.org/css-display-4/#valdef-reading-order-items-normal",
           "type": "value",
-          "value": "<integer>"
+          "value": "normal"
+        },
+        {
+          "name": "flex-visual",
+          "prose": "Only takes effect on flex containers. Follows the visual reading order of flex items, taking the writing mode into account. Therefore, a document in English, with a flex-direction of row-reverse and reading-order-items of 'flex visual' would have a reading order of left to right.",
+          "href": "https://drafts.csswg.org/css-display-4/#valdef-reading-order-items-flex-visual",
+          "type": "value",
+          "value": "flex-visual"
+        },
+        {
+          "name": "flex-flow",
+          "prose": "Only takes effect on flex containers. Follows the flex-flow direction.",
+          "href": "https://drafts.csswg.org/css-display-4/#valdef-reading-order-items-flex-flow",
+          "type": "value",
+          "value": "flex-flow"
+        },
+        {
+          "name": "grid-rows",
+          "prose": "Only takes effect on grid containers. Follows the visual order of grid items by row, taking the writing mode into account.",
+          "href": "https://drafts.csswg.org/css-display-4/#valdef-reading-order-items-grid-rows",
+          "type": "value",
+          "value": "grid-rows"
+        },
+        {
+          "name": "grid-columns",
+          "prose": "Only takes effect on grid containers. Follows the visual order of grid items by column, taking the writing mode into account.",
+          "href": "https://drafts.csswg.org/css-display-4/#valdef-reading-order-items-grid-columns",
+          "type": "value",
+          "value": "grid-columns"
+        },
+        {
+          "name": "grid-order",
+          "prose": "Follows the order-modified document order. Therefore, as normal unless the order property has been used to change the order of items.",
+          "href": "https://drafts.csswg.org/css-display-4/#valdef-reading-order-items-grid-order",
+          "type": "value",
+          "value": "grid-order"
         }
       ],
       "styleDeclaration": [
-        "layout-order",
-        "layoutOrder"
+        "reading-order-items",
+        "readingOrderItems"
       ]
     },
     {
@@ -181,7 +177,7 @@
         },
         {
           "name": "run-in",
-          "prose": "The element generates an run-in box, which is a type of inline-level box with special behavior that attempts to merge it into a subsequent block container. See § 5 Run-In Layout for details.",
+          "prose": "The element generates an run-in box, which is a type of inline-level box with special behavior that attempts to merge it into a subsequent block container. See § 6 Run-In Layout for details.",
           "href": "https://drafts.csswg.org/css-display-4/#valdef-display-run-in",
           "type": "value",
           "value": "run-in"

package/css-fonts-5.json

@@ -185,7 +185,7 @@
       "name": "<font-tech>",
       "href": "https://drafts.csswg.org/css-fonts-5/#font-tech-values",
       "type": "type",
-      "value": "[<font-features-tech> | <color-font-tech> | variations | palettes | incremental-patch | incremental-range | incremental-auto ]"
+      "value": "[<font-features-tech> | <color-font-tech> | variations | palettes | incremental ]"
     },
     {
       "name": "<font-features-tech>",

package/css-fonts.json

@@ -1121,8 +1121,7 @@
           "name": "<palette-mix()>",
           "prose": "This value defines a position in the interpolation between two palette values, identified by <palette-identifier>, by the palette keywords normal, light, dark, or by another <palette-mix()> value. The glyphs of the font must be rendered with a palette that is created by interpolating for each palette color index between the matching color indices of the first and second palette specified as arguments, recursively resolving <palette-mix()> functions if needed. For each palette color, the interpolation follows the rules of the <color-mix()> function. Percentages are normalized according to CSS Color 5 § 2.1 Percentage Normalization.",
           "href": "https://drafts.csswg.org/css-fonts-4/#typedef-font-palette-palette-mix",
-          "type": "type",
-          "value": "palette-mix(<color-interpolation-method> , [ [normal | light | dark | <palette-identifier> | <palette-mix()> ] && <percentage [0,100]>? ]#{2})"
+          "type": "type"
         }
       ],
       "styleDeclaration": [
@@ -1603,7 +1602,7 @@
       "name": "<font-tech>",
       "href": "https://drafts.csswg.org/css-fonts-4/#font-tech-values",
       "type": "type",
-      "value": "[<font-features-tech> | <color-font-tech> | variations | palettes | incremental-patch | incremental-range | incremental-auto ]"
+      "value": "[<font-features-tech> | <color-font-tech> | variations | palettes | incremental ]"
     },
     {
       "name": "<font-features-tech>",
@@ -1682,6 +1681,13 @@
       "href": "https://drafts.csswg.org/css-fonts-4/#typedef-opentype-tag",
       "type": "type",
       "value": "<string>"
+    },
+    {
+      "name": "palette-mix()",
+      "prose": "With the palette-mix() function defined as follows:",
+      "href": "https://drafts.csswg.org/css-fonts-4/#funcdef-palette-mix",
+      "type": "function",
+      "value": "palette-mix(<color-interpolation-method> , [ [normal | light | dark | <palette-identifier> | <palette-mix()> ] && <percentage [0,100]>? ]#{2})"
     }
   ],
   "warnings": [

package/css-images-4.json

@@ -155,7 +155,7 @@
       "name": "<cf-image>",
       "href": "https://drafts.csswg.org/css-images-4/#typedef-cf-image",
       "type": "type",
-      "value": "<percentage [0,100]>? && [ <image> | <color> ]"
+      "value": "[ <image> | <color> ] && <percentage [0,100]>?"
     },
     {
       "name": "element()",

package/css-shapes.json

@@ -46,7 +46,7 @@
     {
       "name": "shape-image-threshold",
       "href": "https://drafts.csswg.org/css-shapes-1/#propdef-shape-image-threshold",
-      "value": "<'opacity'>",
+      "value": "<opacity-value>",
       "initial": "0",
       "appliesTo": "floats",
       "inherited": "no",

package/css-text-4.json

@@ -1305,7 +1305,7 @@
         },
         {
           "name": "space-first",
-          "prose": "Set fullwidth opening punctuation with full-width glyphs (spaced) on the first line the block container and each line after a forced line break. Otherwise as trim-auto.",
+          "prose": "Set fullwidth opening punctuation with full-width glyphs (spaced) on the first line the block container and each line after a forced line break. Otherwise as normal.",
           "href": "https://drafts.csswg.org/css-text-4/#valdef-text-spacing-trim-space-first",
           "type": "value",
           "value": "space-first"

package/css-ui.json

@@ -384,6 +384,38 @@
         "caretColor"
       ]
     },
+    {
+      "name": "caret-animation",
+      "href": "https://drafts.csswg.org/css-ui-4/#propdef-caret-animation",
+      "value": "auto | manual",
+      "initial": "auto",
+      "appliesTo": "elements that accept input",
+      "inherited": "yes",
+      "percentages": "N/A",
+      "computedValue": "specified keyword",
+      "canonicalOrder": "per grammar",
+      "animationType": "discrete",
+      "values": [
+        {
+          "name": "auto",
+          "prose": "The UA determines how the caret should be animated, if at all. It should match platform conventions, and may be adjusted based on context.",
+          "href": "https://drafts.csswg.org/css-ui-4/#valdef-caret-animation-auto",
+          "type": "value",
+          "value": "auto"
+        },
+        {
+          "name": "manual",
+          "prose": "The UA must not animate the caret.",
+          "href": "https://drafts.csswg.org/css-ui-4/#valdef-caret-animation-manual",
+          "type": "value",
+          "value": "manual"
+        }
+      ],
+      "styleDeclaration": [
+        "caret-animation",
+        "caretAnimation"
+      ]
+    },
     {
       "name": "caret-shape",
       "href": "https://drafts.csswg.org/css-ui-4/#propdef-caret-shape",
@@ -433,7 +465,7 @@
     {
       "name": "caret",
       "href": "https://drafts.csswg.org/css-ui-4/#propdef-caret",
-      "value": "<'caret-color'> || <'caret-shape'>",
+      "value": "<'caret-color'> || <'caret-animation'> || <'caret-shape'>",
       "initial": "auto",
       "appliesTo": "elements that accept input",
       "inherited": "yes",

package/css-values-5.json

@@ -397,6 +397,40 @@
       "prose": "The sibling-index() functional notation represents, as an <integer>, the index of the element on which the notation is used among the children of its parent. Like :nth-child(), sibling-index() is 1-indexed.",
       "href": "https://drafts.csswg.org/css-values-5/#funcdef-sibling-index",
       "type": "function"
+    },
+    {
+      "name": "calc-size()",
+      "href": "https://drafts.csswg.org/css-values-5/#funcdef-calc-size",
+      "type": "function",
+      "value": "calc-size( <calc-size-basis>, <calc-sum>? )",
+      "values": [
+        {
+          "name": "size",
+          "prose": "Within the calc-size calculation, if the calc-size basis is not any, the keyword size is allowed. This keyword is a <length>, and resolves at used value time.",
+          "href": "https://drafts.csswg.org/css-values-5/#valdef-calc-size-size",
+          "type": "value",
+          "value": "size"
+        },
+        {
+          "name": "any",
+          "prose": "(If the calc-size basis is any, the calc-size() is a definite length, equal to its calc-size calculation.)",
+          "href": "https://drafts.csswg.org/css-values-5/#valdef-calc-size-any",
+          "type": "value",
+          "value": "any"
+        }
+      ]
+    },
+    {
+      "name": "<calc-size-basis>",
+      "href": "https://drafts.csswg.org/css-values-5/#typedef-calc-size-basis",
+      "type": "type",
+      "value": "[ <intrinsic-size-keyword> | <calc-size()> | any | <calc-sum> ]"
+    },
+    {
+      "name": "<intrinsic-size-keyword>",
+      "prose": "The <intrinsic-size-keyword> production matches any intrinsic size keywords allowed in the context. For example, in width, it matches auto, min-content, stretch, etc.",
+      "href": "https://drafts.csswg.org/css-values-5/#typedef-intrinsic-size-keyword",
+      "type": "type"
     }
   ],
   "warnings": [

package/mediaqueries-5.json

@@ -145,7 +145,7 @@
           "name": "display-mode",
           "href": "https://drafts.csswg.org/mediaqueries-5/#descdef-media-display-mode",
           "for": "@media",
-          "value": "fullscreen | standalone | minimal-ui | browser",
+          "value": "fullscreen | standalone | minimal-ui | browser | picture-in-picture",
           "type": "discrete"
         },
         {

package/package.json

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