@webref/css 5.4.4 → 6.1.0

package/compositing.json

@@ -3,8 +3,8 @@
     "title": "Compositing and Blending Level 2",
     "url": "https://drafts.fxtf.org/compositing-2/"
   },
-  "properties": {
-    "mix-blend-mode": {
+  "properties": [
+    {
       "name": "mix-blend-mode",
       "value": "<blend-mode> | plus-darker | plus-lighter",
       "initial": "normal",
@@ -20,7 +20,7 @@
         "mixBlendMode"
       ]
     },
-    "isolation": {
+    {
       "name": "isolation",
       "value": "<isolation-mode>",
       "initial": "auto",
@@ -35,7 +35,7 @@
         "isolation"
       ]
     },
-    "background-blend-mode": {
+    {
       "name": "background-blend-mode",
       "value": "<mix-blend-mode>#",
       "initial": "normal",
@@ -51,17 +51,106 @@
         "backgroundBlendMode"
       ]
     }
-  },
-  "atrules": {},
-  "valuespaces": {
-    "<blend-mode>": {
-      "value": "normal | multiply | screen | overlay | darken | lighten | color-dodge |color-burn | hard-light | soft-light | difference | exclusion | hue | saturation | color | luminosity"
+  ],
+  "atrules": [],
+  "selectors": [],
+  "values": [
+    {
+      "name": "<blend-mode>",
+      "type": "type",
+      "value": "normal | multiply | screen | overlay | darken | lighten | color-dodge |color-burn | hard-light | soft-light | difference | exclusion | hue | saturation | color | luminosity",
+      "values": [
+        {
+          "name": "normal",
+          "type": "value",
+          "value": "normal"
+        },
+        {
+          "name": "multiply",
+          "type": "value",
+          "value": "multiply"
+        },
+        {
+          "name": "screen",
+          "type": "value",
+          "value": "screen"
+        },
+        {
+          "name": "overlay",
+          "type": "value",
+          "value": "overlay"
+        },
+        {
+          "name": "darken",
+          "type": "value",
+          "value": "darken"
+        },
+        {
+          "name": "lighten",
+          "type": "value",
+          "value": "lighten"
+        },
+        {
+          "name": "color-dodge",
+          "type": "value",
+          "value": "color-dodge"
+        },
+        {
+          "name": "color-burn",
+          "type": "value",
+          "value": "color-burn"
+        },
+        {
+          "name": "hard-light",
+          "type": "value",
+          "value": "hard-light"
+        },
+        {
+          "name": "soft-light",
+          "type": "value",
+          "value": "soft-light"
+        },
+        {
+          "name": "difference",
+          "type": "value",
+          "value": "difference"
+        },
+        {
+          "name": "exclusion",
+          "type": "value",
+          "value": "exclusion"
+        },
+        {
+          "name": "hue",
+          "type": "value",
+          "value": "hue"
+        },
+        {
+          "name": "saturation",
+          "type": "value",
+          "value": "saturation"
+        },
+        {
+          "name": "color",
+          "type": "value",
+          "value": "color"
+        },
+        {
+          "name": "luminosity",
+          "type": "value",
+          "value": "luminosity"
+        }
+      ]
     },
-    "<isolation-mode>": {
+    {
+      "name": "<isolation-mode>",
+      "type": "type",
       "value": "auto | isolate"
     },
-    "<composite-mode>": {
+    {
+      "name": "<composite-mode>",
+      "type": "type",
       "value": "clear | copy | source-over | destination-over | source-in | destination-in | source-out | destination-out | source-atop | destination-atop | xor | lighter | plus-darker | plus-lighter"
     }
-  }
+  ]
 }

package/css-align.json

@@ -3,8 +3,8 @@
     "title": "CSS Box Alignment Module Level 3",
     "url": "https://drafts.csswg.org/css-align-3/"
   },
-  "properties": {
-    "align-content": {
+  "properties": [
+    {
       "name": "align-content",
       "value": "normal | <baseline-position> | <content-distribution> | <overflow-position>? <content-position>",
       "initial": "normal",
@@ -14,12 +14,20 @@
       "computedValue": "specified keyword(s)",
       "canonicalOrder": "per grammar",
       "animationType": "discrete",
+      "values": [
+        {
+          "name": "normal",
+          "prose": "Aligns the contents of the box as a whole (as the alignment subject) within the box itself (as the alignment container): along the inline/row/main axis of the box (for justify-content) or the block/column/cross axis of the box (for align-content). Values other than normal are defined in § 4 Alignment Keywords, above.",
+          "type": "value",
+          "value": "normal"
+        }
+      ],
       "styleDeclaration": [
         "align-content",
         "alignContent"
       ]
     },
-    "justify-content": {
+    {
       "name": "justify-content",
       "value": "normal | <content-distribution> | <overflow-position>? [ <content-position> | left | right ]",
       "initial": "normal",
@@ -29,12 +37,32 @@
       "computedValue": "specified keyword(s)",
       "canonicalOrder": "per grammar",
       "animationType": "discrete",
+      "values": [
+        {
+          "name": "left",
+          "prose": "Aligns the alignment subject to be flush with the alignment container’s line-left or physical left edge, whichever is in the appropriate axis. If the property’s axis is not parallel with either left↔right axis, this value behaves as start. Currently, the only case where the property’s axis is not parallel with either left↔right axis is in a column flexbox.",
+          "type": "value",
+          "value": "left"
+        },
+        {
+          "name": "right",
+          "prose": "Aligns the alignment subject to be flush with the alignment container’s line-right or physical right edge, whichever is in the appropriate axis. If the property’s axis is not parallel with either left↔right axis, this value behaves as start. Currently, the only case where the property’s axis is not parallel with either left↔right axis is in a column flexbox.",
+          "type": "value",
+          "value": "right"
+        },
+        {
+          "name": "normal",
+          "prose": "Aligns the contents of the box as a whole (as the alignment subject) within the box itself (as the alignment container): along the inline/row/main axis of the box (for justify-content) or the block/column/cross axis of the box (for align-content). Values other than normal are defined in § 4 Alignment Keywords, above.",
+          "type": "value",
+          "value": "normal"
+        }
+      ],
       "styleDeclaration": [
         "justify-content",
         "justifyContent"
       ]
     },
-    "place-content": {
+    {
       "name": "place-content",
       "value": "<'align-content'> <'justify-content'>?",
       "initial": "normal",
@@ -49,7 +77,7 @@
         "placeContent"
       ]
     },
-    "justify-self": {
+    {
       "name": "justify-self",
       "value": "auto | normal | stretch | <baseline-position> | <overflow-position>? [ <self-position> | left | right ]",
       "initial": "auto",
@@ -59,12 +87,44 @@
       "computedValue": "specified keyword(s)",
       "canonicalOrder": "per grammar",
       "animationType": "discrete",
+      "values": [
+        {
+          "name": "left",
+          "prose": "Aligns the alignment subject to be flush with the alignment container’s line-left or physical left edge, whichever is in the appropriate axis. If the property’s axis is not parallel with either left↔right axis, this value behaves as start. Currently, the only case where the property’s axis is not parallel with either left↔right axis is in a column flexbox.",
+          "type": "value",
+          "value": "left"
+        },
+        {
+          "name": "right",
+          "prose": "Aligns the alignment subject to be flush with the alignment container’s line-right or physical right edge, whichever is in the appropriate axis. If the property’s axis is not parallel with either left↔right axis, this value behaves as start. Currently, the only case where the property’s axis is not parallel with either left↔right axis is in a column flexbox.",
+          "type": "value",
+          "value": "right"
+        },
+        {
+          "name": "auto",
+          "prose": "Behaves as normal if the box has no parent, or when determining the actual position of an absolutely positioned box. It behaves as the computed justify-items value of the parent box (minus any legacy keywords) otherwise (including when determining the static position of an absolutely positioned box).",
+          "type": "value",
+          "value": "auto"
+        },
+        {
+          "name": "normal",
+          "prose": "Represents the “default” alignment for the layout mode. Its behavior depends on the layout mode, as described below.",
+          "type": "value",
+          "value": "normal"
+        },
+        {
+          "name": "stretch",
+          "prose": "When the box’s computed width/height (as appropriate to the axis) is auto and neither of its margins (in the appropriate axis) are auto, sets the box’s used size to the length necessary to make its outer size as close to filling the alignment container as possible while still respecting the constraints imposed by min-height/min-width/max-height/max-width. Unless otherwise specified, this value falls back to flex-start generally, and to self-start or self-end if the box has also specified first baseline or last baseline baseline content-alignment (respectively) in the same axis.",
+          "type": "value",
+          "value": "stretch"
+        }
+      ],
       "styleDeclaration": [
         "justify-self",
         "justifySelf"
       ]
     },
-    "align-self": {
+    {
       "name": "align-self",
       "value": "auto | normal | stretch | <baseline-position> | <overflow-position>? <self-position>",
       "initial": "auto",
@@ -74,12 +134,32 @@
       "computedValue": "specified keyword(s)",
       "canonicalOrder": "per grammar",
       "animationType": "discrete",
+      "values": [
+        {
+          "name": "auto",
+          "prose": "Behaves as normal if the box has no parent, or when determining the actual position of an absolutely positioned box. It behaves as the computed align-items value of the parent box (minus any legacy keywords) otherwise (including when determining the static position of an absolutely positioned box).",
+          "type": "value",
+          "value": "auto"
+        },
+        {
+          "name": "normal",
+          "prose": "Represents the “default” alignment for the layout mode, as defined below.",
+          "type": "value",
+          "value": "normal"
+        },
+        {
+          "name": "stretch",
+          "prose": "As defined for justify-self in § 6.1 Inline-Axis (or Main-Axis) Alignment: the justify-self property.",
+          "type": "value",
+          "value": "stretch"
+        }
+      ],
       "styleDeclaration": [
         "align-self",
         "alignSelf"
       ]
     },
-    "place-self": {
+    {
       "name": "place-self",
       "value": "<'align-self'> <'justify-self'>?",
       "initial": "auto",
@@ -94,7 +174,7 @@
         "placeSelf"
       ]
     },
-    "justify-items": {
+    {
       "name": "justify-items",
       "value": "normal | stretch | <baseline-position> | <overflow-position>? [ <self-position> | left | right ] | legacy | legacy && [ left | right | center ]",
       "initial": "legacy",
@@ -104,12 +184,31 @@
       "computedValue": "specified keyword(s), except for legacy (see prose)",
       "canonicalOrder": "per grammar",
       "animationType": "discrete",
+      "values": [
+        {
+          "name": "left",
+          "prose": "Aligns the alignment subject to be flush with the alignment container’s line-left or physical left edge, whichever is in the appropriate axis. If the property’s axis is not parallel with either left↔right axis, this value behaves as start. Currently, the only case where the property’s axis is not parallel with either left↔right axis is in a column flexbox.",
+          "type": "value",
+          "value": "left"
+        },
+        {
+          "name": "right",
+          "prose": "Aligns the alignment subject to be flush with the alignment container’s line-right or physical right edge, whichever is in the appropriate axis. If the property’s axis is not parallel with either left↔right axis, this value behaves as start. Currently, the only case where the property’s axis is not parallel with either left↔right axis is in a column flexbox.",
+          "type": "value",
+          "value": "right"
+        },
+        {
+          "name": "legacy",
+          "value": "legacy",
+          "type": "value"
+        }
+      ],
       "styleDeclaration": [
         "justify-items",
         "justifyItems"
       ]
     },
-    "align-items": {
+    {
       "name": "align-items",
       "value": "normal | stretch | <baseline-position> | [ <overflow-position>? <self-position> ]",
       "initial": "normal",
@@ -124,7 +223,7 @@
         "alignItems"
       ]
     },
-    "place-items": {
+    {
       "name": "place-items",
       "value": "<'align-items'> <'justify-items'>?",
       "initial": "see individual properties",
@@ -139,7 +238,7 @@
         "placeItems"
       ]
     },
-    "row-gap": {
+    {
       "name": "row-gap",
       "value": "normal | <length-percentage [0,∞]>",
       "initial": "normal",
@@ -149,12 +248,20 @@
       "computedValue": "specified keyword, else a computed <length-percentage> value",
       "canonicalOrder": "per grammar",
       "animationType": "by computed value type",
+      "values": [
+        {
+          "name": "normal",
+          "prose": "The normal represents a used value of 1em on multi-column containers, and a used value of 0px in all other contexts.",
+          "type": "value",
+          "value": "normal"
+        }
+      ],
       "styleDeclaration": [
         "row-gap",
         "rowGap"
       ]
     },
-    "column-gap": {
+    {
       "name": "column-gap",
       "value": "normal | <length-percentage [0,∞]>",
       "initial": "normal",
@@ -164,12 +271,20 @@
       "computedValue": "specified keyword, else a computed <length-percentage> value",
       "canonicalOrder": "per grammar",
       "animationType": "by computed value type",
+      "values": [
+        {
+          "name": "normal",
+          "prose": "The normal represents a used value of 1em on multi-column containers, and a used value of 0px in all other contexts.",
+          "type": "value",
+          "value": "normal"
+        }
+      ],
       "styleDeclaration": [
         "column-gap",
         "columnGap"
       ]
     },
-    "gap": {
+    {
       "name": "gap",
       "value": "<'row-gap'> <'column-gap'>?",
       "initial": "see individual properties",
@@ -179,48 +294,203 @@
       "computedValue": "see individual properties",
       "canonicalOrder": "per grammar",
       "animationType": "by computed value type",
+      "values": [
+        {
+          "name": "normal",
+          "prose": "The normal represents a used value of 1em on multi-column containers, and a used value of 0px in all other contexts.",
+          "type": "value",
+          "value": "normal"
+        }
+      ],
       "styleDeclaration": [
         "gap"
       ]
     },
-    "grid-row-gap": {
+    {
       "name": "grid-row-gap",
       "styleDeclaration": [
         "grid-row-gap",
         "gridRowGap"
       ]
     },
-    "grid-column-gap": {
+    {
       "name": "grid-column-gap",
       "styleDeclaration": [
         "grid-column-gap",
         "gridColumnGap"
       ]
     },
-    "grid-gap": {
+    {
       "name": "grid-gap",
       "styleDeclaration": [
         "grid-gap",
         "gridGap"
       ]
     }
-  },
-  "atrules": {},
-  "valuespaces": {
-    "<self-position>": {
-      "value": "center | start | end | self-start | self-end | flex-start | flex-end"
+  ],
+  "atrules": [],
+  "selectors": [],
+  "values": [
+    {
+      "name": "<self-position>",
+      "type": "type",
+      "value": "center | start | end | self-start | self-end | flex-start | flex-end",
+      "values": [
+        {
+          "name": "center",
+          "prose": "Centers the alignment subject within its alignment container.",
+          "type": "value",
+          "value": "center"
+        },
+        {
+          "name": "start",
+          "prose": "Aligns the alignment subject to be flush with the alignment container’s start edge in the appropriate axis.",
+          "type": "value",
+          "value": "start"
+        },
+        {
+          "name": "end",
+          "prose": "Aligns the alignment subject to be flush with the alignment container’s end edge in the appropriate axis.",
+          "type": "value",
+          "value": "end"
+        },
+        {
+          "name": "self-start",
+          "prose": "Aligns the alignment subject to be flush with the edge of the alignment container corresponding to the alignment subject’s start side in the appropriate axis.",
+          "type": "value",
+          "value": "self-start"
+        },
+        {
+          "name": "self-end",
+          "prose": "Aligns the alignment subject to be flush with the edge of the alignment container corresponding to the alignment subject’s end side in the appropriate axis.",
+          "type": "value",
+          "value": "self-end"
+        },
+        {
+          "name": "flex-start",
+          "prose": "Only used in flex layout. [CSS-FLEXBOX-1] Aligns the alignment subject to be flush with the edge of the alignment container corresponding to the flex container’s main-start or cross-start side, as appropriate. When used outside of a flex formatting context, this value behaves as start. That is, on boxes that are not flex items (or pretending to be flex items, such as when determining the static position of an absolutely-positioned box that is a child of a flex container), this value behaves as start when used in the self-alignment properties, and on boxes that are not flex containers, this value behaves as start when used in the content-distribution properties.",
+          "type": "value",
+          "value": "flex-start"
+        },
+        {
+          "name": "flex-end",
+          "prose": "Only used in flex layout. Aligns the alignment subject to be flush with the edge of the alignment container corresponding to the flex container’s main-end or cross-end side, as appropriate. When used outside of a flex formatting context, this value behaves as end. That is, on boxes that are not flex items (or pretending to be flex items, such as when determining the static position of an absolutely-positioned box that is a child of a flex container), this value behaves as end when used in the self-alignment properties, and on boxes that are not flex containers, this value behaves as end when used in the content-distribution properties.",
+          "type": "value",
+          "value": "flex-end"
+        }
+      ]
     },
-    "<content-position>": {
-      "value": "center | start | end | flex-start | flex-end"
+    {
+      "name": "<content-position>",
+      "type": "type",
+      "value": "center | start | end | flex-start | flex-end",
+      "values": [
+        {
+          "name": "center",
+          "prose": "Centers the alignment subject within its alignment container.",
+          "type": "value",
+          "value": "center"
+        },
+        {
+          "name": "start",
+          "prose": "Aligns the alignment subject to be flush with the alignment container’s start edge in the appropriate axis.",
+          "type": "value",
+          "value": "start"
+        },
+        {
+          "name": "end",
+          "prose": "Aligns the alignment subject to be flush with the alignment container’s end edge in the appropriate axis.",
+          "type": "value",
+          "value": "end"
+        },
+        {
+          "name": "flex-start",
+          "prose": "Only used in flex layout. [CSS-FLEXBOX-1] Aligns the alignment subject to be flush with the edge of the alignment container corresponding to the flex container’s main-start or cross-start side, as appropriate. When used outside of a flex formatting context, this value behaves as start. That is, on boxes that are not flex items (or pretending to be flex items, such as when determining the static position of an absolutely-positioned box that is a child of a flex container), this value behaves as start when used in the self-alignment properties, and on boxes that are not flex containers, this value behaves as start when used in the content-distribution properties.",
+          "type": "value",
+          "value": "flex-start"
+        },
+        {
+          "name": "flex-end",
+          "prose": "Only used in flex layout. Aligns the alignment subject to be flush with the edge of the alignment container corresponding to the flex container’s main-end or cross-end side, as appropriate. When used outside of a flex formatting context, this value behaves as end. That is, on boxes that are not flex items (or pretending to be flex items, such as when determining the static position of an absolutely-positioned box that is a child of a flex container), this value behaves as end when used in the self-alignment properties, and on boxes that are not flex containers, this value behaves as end when used in the content-distribution properties.",
+          "type": "value",
+          "value": "flex-end"
+        }
+      ]
     },
-    "<baseline-position>": {
-      "value": "[ first | last ]? && baseline"
+    {
+      "name": "<baseline-position>",
+      "type": "type",
+      "value": "[ first | last ]? && baseline",
+      "values": [
+        {
+          "name": "baseline",
+          "prose": "Computes to first baseline, defined below.",
+          "type": "value",
+          "value": "baseline"
+        },
+        {
+          "name": "first baseline",
+          "prose": "Specifies participation in first-baseline alignment: aligns the alignment baseline of the box’s first baseline set with the corresponding baseline of its baseline-sharing group. See § 9.3 Aligning Boxes by Baseline for more details. The fallback alignment for first baseline is safe self-start (for self-alignment) or safe start (for content-distribution).",
+          "type": "value",
+          "value": "first baseline"
+        },
+        {
+          "name": "last baseline",
+          "prose": "Specifies participation in last-baseline alignment: aligns the alignment baseline of the box’s last baseline set with the corresponding baseline of its baseline-sharing group.̣ See § 9.3 Aligning Boxes by Baseline for more details. The fallback alignment for last baseline is safe self-end (for self-alignment) or safe end (for content-distribution).",
+          "type": "value",
+          "value": "last baseline"
+        }
+      ]
     },
-    "<content-distribution>": {
-      "value": "space-between | space-around | space-evenly | stretch"
+    {
+      "name": "<content-distribution>",
+      "type": "type",
+      "value": "space-between | space-around | space-evenly | stretch",
+      "values": [
+        {
+          "name": "space-between",
+          "prose": "The alignment subjects are evenly distributed in the alignment container. The first alignment subject is placed flush with the start edge of the alignment container, the last alignment subject is placed flush with the end edge of the alignment container, and the remaining alignment subjects are distributed so that the spacing between any two adjacent alignment subjects is the same. The default fallback alignment for this value is flex-start. (For layout modes other than flex layout, flex-start is identical to start.)",
+          "type": "value",
+          "value": "space-between"
+        },
+        {
+          "name": "space-around",
+          "prose": "The alignment subjects are evenly distributed in the alignment container, with a half-size space on either end. The alignment subjects are distributed so that the spacing between any two adjacent alignment subjects is the same, and the spacing before the first and after the last alignment subject is half the size of the other spacing. The default fallback alignment for this value is safe center.",
+          "type": "value",
+          "value": "space-around"
+        },
+        {
+          "name": "space-evenly",
+          "prose": "The alignment subjects are evenly distributed in the alignment container, with a full-size space on either end. The alignment subjects are distributed so that the spacing between any two adjacent alignment subjects, before the first alignment subject, and after the last alignment subject is the same. The default fallback alignment for this value is safe center.",
+          "type": "value",
+          "value": "space-evenly"
+        },
+        {
+          "name": "stretch",
+          "prose": "If the combined size of the alignment subjects is less than the size of the alignment container, any auto-sized alignment subjects have their size increased equally (not proportionally), while still respecting the constraints imposed by max-height/max-width (or equivalent functionality), so that the combined size exactly fills the alignment container. The default fallback alignment for this value is flex-start. (For layout modes other than flex layout, flex-start is identical to start.)",
+          "type": "value",
+          "value": "stretch"
+        }
+      ]
     },
-    "<overflow-position>": {
-      "value": "unsafe | safe"
+    {
+      "name": "<overflow-position>",
+      "type": "type",
+      "value": "unsafe | safe",
+      "values": [
+        {
+          "name": "safe",
+          "prose": "If the size of the alignment subject overflows the alignment container, the alignment subject is instead aligned as if the alignment mode were start.",
+          "type": "value",
+          "value": "safe"
+        },
+        {
+          "name": "unsafe",
+          "prose": "Regardless of the relative sizes of the alignment subject and alignment container, the given alignment value is honored.",
+          "type": "value",
+          "value": "unsafe"
+        }
+      ]
     }
-  }
+  ]
 }