@webref/css 5.4.4 → 6.0.0

package/css-display.json

@@ -3,8 +3,8 @@
     "title": "CSS Display Module Level 3",
     "url": "https://drafts.csswg.org/css-display-3/"
   },
-  "properties": {
-    "display": {
+  "properties": [
+    {
       "name": "display",
       "value": "[ <display-outside> || <display-inside> ] | <display-listitem> | <display-internal> | <display-box> | <display-legacy>",
       "initial": "inline",
@@ -14,11 +14,19 @@
       "computedValue": "a pair of keywords representing the inner and outer display types plus optional list-item flag, or a <display-internal> or <display-box> keyword; see prose in a variety of specs for computation rules",
       "canonicalOrder": "per grammar",
       "animationType": "not animatable",
+      "values": [
+        {
+          "name": "list-item",
+          "prose": "The list-item keyword causes the element to generate a ::marker pseudo-element [CSS-PSEUDO-4] with the content specified by its list-style properties (CSS 2.1§12.5 Lists) [CSS2] together with a principal box of the specified type for its own contents.",
+          "type": "value",
+          "value": "list-item"
+        }
+      ],
       "styleDeclaration": [
         "display"
       ]
     },
-    "order": {
+    {
       "name": "order",
       "value": "<integer>",
       "initial": "0",
@@ -28,11 +36,19 @@
       "computedValue": "specified integer",
       "canonicalOrder": "per grammar",
       "animationType": "by computed value type",
+      "values": [
+        {
+          "name": "<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.",
+          "type": "value",
+          "value": "<integer>"
+        }
+      ],
       "styleDeclaration": [
         "order"
       ]
     },
-    "visibility": {
+    {
       "name": "visibility",
       "value": "visible | hidden | collapse",
       "initial": "visible",
@@ -43,30 +59,245 @@
       "canonicalOrder": "per grammar",
       "animationType": "discrete",
       "media": "visual",
+      "values": [
+        {
+          "name": "visible",
+          "prose": "The generated box is visible, as normal.",
+          "type": "value",
+          "value": "visible"
+        },
+        {
+          "name": "hidden",
+          "prose": "Any boxes generated by the element are invisible. Descendants of the element can, however, be visible if they have visibility: visible.",
+          "type": "value",
+          "value": "hidden"
+        },
+        {
+          "name": "collapse",
+          "prose": "Indicates that the box is collapsed, which can cause it to take up less space than otherwise in a formatting-context–specific way. See dynamic row and column effects in tables [CSS2] and collapsed flex items in flex layout [CSS-FLEXBOX-1]. In all other cases, however, (i.e. unless otherwise specified) this simply makes the box invisible, just like hidden.",
+          "type": "value",
+          "value": "collapse"
+        }
+      ],
       "styleDeclaration": [
         "visibility"
       ]
     }
-  },
-  "atrules": {},
-  "valuespaces": {
-    "<display-outside>": {
-      "value": "block | inline | run-in"
+  ],
+  "atrules": [],
+  "selectors": [],
+  "values": [
+    {
+      "name": "<display-outside>",
+      "type": "type",
+      "value": "block | inline | run-in",
+      "values": [
+        {
+          "name": "block",
+          "prose": "The element generates a box that is block-level when placed in flow layout. [CSS2]",
+          "type": "value",
+          "value": "block"
+        },
+        {
+          "name": "inline",
+          "prose": "The element generates a box that is inline-level when placed in flow layout. [CSS2]",
+          "type": "value",
+          "value": "inline"
+        },
+        {
+          "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.",
+          "type": "value",
+          "value": "run-in"
+        }
+      ]
     },
-    "<display-inside>": {
-      "value": "flow | flow-root | table | flex | grid | ruby"
+    {
+      "name": "<display-inside>",
+      "type": "type",
+      "value": "flow | flow-root | table | flex | grid | ruby",
+      "values": [
+        {
+          "name": "flow",
+          "prose": "The element lays out its contents using flow layout (block-and-inline layout). If its outer display type is inline or run-in, and it is participating in a block or inline formatting context, then it generates an inline box. Otherwise it generates a block container box. Depending on the value of other properties (such as position, float, or overflow) and whether it is itself participating in a block or inline formatting context, it either establishes a new block formatting context for its contents or integrates its contents into its parent formatting context. See CSS2.1 Chapter 9. [CSS2] A block container that establishes a new block formatting context is considered to have a used inner display type of flow-root.",
+          "type": "value",
+          "value": "flow"
+        },
+        {
+          "name": "flow-root",
+          "prose": "The element generates a block container box, and lays out its contents using flow layout. It always establishes a new block formatting context for its contents. [CSS2]",
+          "type": "value",
+          "value": "flow-root"
+        },
+        {
+          "name": "table",
+          "prose": "The element generates a principal table wrapper box that establishes a block formatting context, and which contains an additionally-generated table grid box that establishes a table formatting context. [CSS2]",
+          "type": "value",
+          "value": "table"
+        },
+        {
+          "name": "flex",
+          "prose": "The element generates a principal flex container box and establishes a flex formatting context. [CSS-FLEXBOX-1]",
+          "type": "value",
+          "value": "flex"
+        },
+        {
+          "name": "grid",
+          "prose": "The element generates a principal grid container box, and establishes a grid formatting context. [CSS-GRID-1] (Grids using subgrid might not generate a new grid formatting context; see [CSS-GRID-2] for details.)",
+          "type": "value",
+          "value": "grid"
+        },
+        {
+          "name": "ruby",
+          "prose": "The element generates a ruby container box and establishes a ruby formatting context in addition to integrating its base-level contents into its parent formatting context (if it is inline) or generating a wrapper box of the appropriate outer display type (if it is not). [CSS-RUBY-1]",
+          "type": "value",
+          "value": "ruby"
+        }
+      ]
     },
-    "<display-listitem>": {
+    {
+      "name": "<display-listitem>",
+      "type": "type",
       "value": "<display-outside>? && [ flow | flow-root ]? && list-item"
     },
-    "<display-internal>": {
-      "value": "table-row-group | table-header-group | table-footer-group | table-row | table-cell | table-column-group | table-column | table-caption | ruby-base | ruby-text | ruby-base-container | ruby-text-container"
+    {
+      "name": "<display-internal>",
+      "type": "type",
+      "value": "table-row-group | table-header-group | table-footer-group | table-row | table-cell | table-column-group | table-column | table-caption | ruby-base | ruby-text | ruby-base-container | ruby-text-container",
+      "values": [
+        {
+          "name": "table-row-group",
+          "prose": "The element is an internal table element. It generates the appropriate internal table box which participates in a table formatting context. See CSS2§17.2 [CSS2]. table-cell boxes have a flow-root inner display type.",
+          "type": "value",
+          "value": "table-row-group"
+        },
+        {
+          "name": "table-header-group",
+          "prose": "The element is an internal table element. It generates the appropriate internal table box which participates in a table formatting context. See CSS2§17.2 [CSS2]. table-cell boxes have a flow-root inner display type.",
+          "type": "value",
+          "value": "table-header-group"
+        },
+        {
+          "name": "table-footer-group",
+          "prose": "The element is an internal table element. It generates the appropriate internal table box which participates in a table formatting context. See CSS2§17.2 [CSS2]. table-cell boxes have a flow-root inner display type.",
+          "type": "value",
+          "value": "table-footer-group"
+        },
+        {
+          "name": "table-row",
+          "prose": "The element is an internal table element. It generates the appropriate internal table box which participates in a table formatting context. See CSS2§17.2 [CSS2]. table-cell boxes have a flow-root inner display type.",
+          "type": "value",
+          "value": "table-row"
+        },
+        {
+          "name": "table-cell",
+          "prose": "The element is an internal table element. It generates the appropriate internal table box which participates in a table formatting context. See CSS2§17.2 [CSS2]. table-cell boxes have a flow-root inner display type.",
+          "type": "value",
+          "value": "table-cell"
+        },
+        {
+          "name": "table-column-group",
+          "prose": "The element is an internal table element. It generates the appropriate internal table box which participates in a table formatting context. See CSS2§17.2 [CSS2]. table-cell boxes have a flow-root inner display type.",
+          "type": "value",
+          "value": "table-column-group"
+        },
+        {
+          "name": "table-column",
+          "prose": "The element is an internal table element. It generates the appropriate internal table box which participates in a table formatting context. See CSS2§17.2 [CSS2]. table-cell boxes have a flow-root inner display type.",
+          "type": "value",
+          "value": "table-column"
+        },
+        {
+          "name": "table-caption",
+          "prose": "The element generates a table caption box, which is a block box with special behavior with respect to table and table wrapper boxes. See CSS2§17.2 [CSS2]. table-caption boxes have a flow-root inner display type.",
+          "type": "value",
+          "value": "table-caption"
+        },
+        {
+          "name": "ruby-base",
+          "prose": "The element is an internal ruby element. It generates the appropriate internal ruby box which participates in a ruby formatting context. [CSS-RUBY-1] ruby-base and ruby-text have a flow inner display type.",
+          "type": "value",
+          "value": "ruby-base"
+        },
+        {
+          "name": "ruby-text",
+          "prose": "The element is an internal ruby element. It generates the appropriate internal ruby box which participates in a ruby formatting context. [CSS-RUBY-1] ruby-base and ruby-text have a flow inner display type.",
+          "type": "value",
+          "value": "ruby-text"
+        },
+        {
+          "name": "ruby-base-container",
+          "prose": "The element is an internal ruby element. It generates the appropriate internal ruby box which participates in a ruby formatting context. [CSS-RUBY-1] ruby-base and ruby-text have a flow inner display type.",
+          "type": "value",
+          "value": "ruby-base-container"
+        },
+        {
+          "name": "ruby-text-container",
+          "prose": "The element is an internal ruby element. It generates the appropriate internal ruby box which participates in a ruby formatting context. [CSS-RUBY-1] ruby-base and ruby-text have a flow inner display type.",
+          "type": "value",
+          "value": "ruby-text-container"
+        }
+      ]
     },
-    "<display-box>": {
-      "value": "contents | none"
+    {
+      "name": "<display-box>",
+      "type": "type",
+      "value": "contents | none",
+      "values": [
+        {
+          "name": "contents",
+          "prose": "The element itself does not generate any boxes, but its children and pseudo-elements still generate boxes and text runs as normal. For the purposes of box generation and layout, the element must be treated as if it had been replaced in the element tree by its contents (including both its source-document children and its pseudo-elements, such as ::before and ::after pseudo-elements, which are generated before/after the element’s children as normal). This value computes to display: none on replaced elements and other elements whose rendering is not entirely controlled by CSS; see Appendix B: Effects of display: contents on Unusual Elements for details.",
+          "type": "value",
+          "value": "contents"
+        },
+        {
+          "name": "none",
+          "prose": "The element and its descendants generate no boxes or text runs. Similarly, if a text node is defined to behave as display: none, it generates no text runs.",
+          "type": "value",
+          "value": "none"
+        }
+      ]
     },
-    "<display-legacy>": {
-      "value": "inline-block | inline-table | inline-flex | inline-grid"
+    {
+      "name": "<display-legacy>",
+      "type": "type",
+      "value": "inline-block | inline-table | inline-flex | inline-grid",
+      "values": [
+        {
+          "name": "inline-block",
+          "prose": "Computes to inline flow-root.",
+          "type": "value",
+          "value": "inline-block"
+        },
+        {
+          "name": "inline-table",
+          "prose": "Computes to inline table.",
+          "type": "value",
+          "value": "inline-table"
+        },
+        {
+          "name": "inline-flex",
+          "prose": "Computes to inline flex.",
+          "type": "value",
+          "value": "inline-flex"
+        },
+        {
+          "name": "inline-grid",
+          "prose": "Computes to inline grid.",
+          "type": "value",
+          "value": "inline-grid"
+        }
+      ]
+    }
+  ],
+  "warnings": [
+    {
+      "msg": "Dangling value",
+      "name": "list-item",
+      "prose": "The list-item keyword causes the element to generate a ::marker pseudo-element [CSS-PSEUDO-4] with the content specified by its list-style properties (CSS 2.1§12.5 Lists) [CSS2] together with a principal box of the specified type for its own contents.",
+      "type": "value",
+      "value": "list-item",
+      "for": "<display-list-item>"
     }
-  }
+  ]
 }

package/css-easing.json

@@ -3,38 +3,150 @@
     "title": "CSS Easing Functions Level 2",
     "url": "https://drafts.csswg.org/css-easing-2/"
   },
-  "properties": {},
-  "atrules": {},
-  "valuespaces": {
-    "<easing-function>": {
-      "value": "linear | <linear-easing-function> | <cubic-bezier-easing-function> | <step-easing-function>"
+  "properties": [],
+  "atrules": [],
+  "selectors": [],
+  "values": [
+    {
+      "name": "<easing-function>",
+      "value": "linear | <linear-easing-function> | <cubic-bezier-easing-function> | <step-easing-function>",
+      "type": "type",
+      "values": [
+        {
+          "name": "linear",
+          "prose": "The linear keyword produces a linear easing function with two points:",
+          "type": "value",
+          "value": "linear"
+        }
+      ]
     },
-    "<cubic-bezier-easing-function>": {
-      "value": "ease | ease-in | ease-out | ease-in-out | cubic-bezier(<number [0,1]>, <number>, <number [0,1]>, <number>)"
-    },
-    "<cubic-bezier()>": {
-      "value": "cubic-bezier(<number [0,1]>, <number>, <number [0,1]>, <number>)"
-    },
-    "<step-easing-function>": {
-      "value": "step-start | step-end | steps(<integer>[, <step-position>]?)"
-    },
-    "<step-position>": {
-      "value": "jump-start | jump-end | jump-none | jump-both | start | end"
-    },
-    "<steps()>": {
-      "value": "steps(<integer>[, <step-position> ]?)"
-    },
-    "<linear-easing-function>": {
+    {
+      "name": "<linear-easing-function>",
+      "type": "type",
       "value": "linear(<linear-stop-list>)"
     },
-    "<linear-stop-list>": {
+    {
+      "name": "linear()",
+      "value": "linear(<linear-stop-list>)",
+      "type": "function"
+    },
+    {
+      "name": "<linear-stop-list>",
+      "type": "type",
       "value": "[ <linear-stop> ]#"
     },
-    "<linear-stop>": {
+    {
+      "name": "<linear-stop>",
+      "type": "type",
       "value": "<number> && <linear-stop-length>?"
     },
-    "<linear-stop-length>": {
+    {
+      "name": "<linear-stop-length>",
+      "type": "type",
       "value": "<percentage>{1,2}"
+    },
+    {
+      "name": "<cubic-bezier-easing-function>",
+      "value": "ease | ease-in | ease-out | ease-in-out | cubic-bezier(<number [0,1]>, <number>, <number [0,1]>, <number>)",
+      "type": "type",
+      "values": [
+        {
+          "name": "ease",
+          "prose": "Equivalent to cubic-bezier(0.25, 0.1, 0.25, 1).",
+          "type": "value",
+          "value": "ease"
+        },
+        {
+          "name": "ease-in",
+          "prose": "Equivalent to cubic-bezier(0.42, 0, 1, 1).",
+          "type": "value",
+          "value": "ease-in"
+        },
+        {
+          "name": "ease-out",
+          "prose": "Equivalent to cubic-bezier(0, 0, 0.58, 1).",
+          "type": "value",
+          "value": "ease-out"
+        },
+        {
+          "name": "ease-in-out",
+          "prose": "Equivalent to cubic-bezier(0.42, 0, 0.58, 1).",
+          "type": "value",
+          "value": "ease-in-out"
+        },
+        {
+          "name": "cubic-bezier()",
+          "value": "cubic-bezier(<number [0,1]>, <number>, <number [0,1]>, <number>)",
+          "type": "function"
+        }
+      ]
+    },
+    {
+      "name": "<step-easing-function>",
+      "value": "step-start | step-end | steps(<integer>[, <step-position>]?)",
+      "type": "type",
+      "values": [
+        {
+          "name": "step-start",
+          "prose": "Computes to steps(1, start)",
+          "type": "value",
+          "value": "step-start"
+        },
+        {
+          "name": "step-end",
+          "prose": "Computes to steps(1, end) Example step easing function keyword values.",
+          "type": "value",
+          "value": "step-end"
+        },
+        {
+          "name": "steps()",
+          "value": "steps(<integer>[, <step-position> ]?)",
+          "type": "function",
+          "values": [
+            {
+              "name": "jump-start",
+              "prose": "The first rise occurs at input progress value of 0.",
+              "type": "value",
+              "value": "jump-start"
+            },
+            {
+              "name": "jump-end",
+              "prose": "The last rise occurs at input progress value of 1.",
+              "type": "value",
+              "value": "jump-end"
+            },
+            {
+              "name": "jump-none",
+              "prose": "All rises occur within the range (0, 1).",
+              "type": "value",
+              "value": "jump-none"
+            },
+            {
+              "name": "jump-both",
+              "prose": "The first rise occurs at input progress value of 0 and the last rise occurs at input progress value of 1.",
+              "type": "value",
+              "value": "jump-both"
+            },
+            {
+              "name": "start",
+              "prose": "Behaves as jump-start.",
+              "type": "value",
+              "value": "start"
+            },
+            {
+              "name": "end",
+              "prose": "Behaves as jump-end.",
+              "type": "value",
+              "value": "end"
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "name": "<step-position>",
+      "value": "jump-start | jump-end | jump-none | jump-both | start | end",
+      "type": "type"
     }
-  }
+  ]
 }

package/css-env.json

@@ -3,11 +3,66 @@
     "title": "CSS Environment Variables Module Level 1",
     "url": "https://drafts.csswg.org/css-env-1/"
   },
-  "properties": {},
-  "atrules": {},
-  "valuespaces": {
-    "<env()>": {
-      "value": "env( <custom-ident> <integer [0,∞]>*, <declaration-value>? )"
+  "properties": [],
+  "atrules": [],
+  "selectors": [],
+  "values": [
+    {
+      "name": "env()",
+      "type": "function",
+      "value": "env( <custom-ident> <integer [0,∞]>*, <declaration-value>? )",
+      "values": [
+        {
+          "name": "safe-area-inset-top",
+          "type": "value",
+          "value": "safe-area-inset-top"
+        },
+        {
+          "name": "safe-area-inset-right",
+          "type": "value",
+          "value": "safe-area-inset-right"
+        },
+        {
+          "name": "safe-area-inset-bottom",
+          "type": "value",
+          "value": "safe-area-inset-bottom"
+        },
+        {
+          "name": "safe-area-inset-left",
+          "type": "value",
+          "value": "safe-area-inset-left"
+        },
+        {
+          "name": "viewport-segment-width",
+          "type": "value",
+          "value": "viewport-segment-width"
+        },
+        {
+          "name": "viewport-segment-height",
+          "type": "value",
+          "value": "viewport-segment-height"
+        },
+        {
+          "name": "viewport-segment-top",
+          "type": "value",
+          "value": "viewport-segment-top"
+        },
+        {
+          "name": "viewport-segment-left",
+          "type": "value",
+          "value": "viewport-segment-left"
+        },
+        {
+          "name": "viewport-segment-bottom",
+          "type": "value",
+          "value": "viewport-segment-bottom"
+        },
+        {
+          "name": "viewport-segment-right",
+          "type": "value",
+          "value": "viewport-segment-right"
+        }
+      ]
     }
-  }
+  ]
 }

package/css-exclusions.json

@@ -3,8 +3,8 @@
     "title": "CSS Exclusions Module Level 1",
     "url": "https://drafts.csswg.org/css-exclusions-1/"
   },
-  "properties": {
-    "wrap-flow": {
+  "properties": [
+    {
       "name": "wrap-flow",
       "value": "auto | both | start | end | minimum | maximum | clear",
       "initial": "auto",
@@ -13,12 +13,56 @@
       "percentages": "N/A",
       "computedValue": "as specified except for element’s whose float computed value is not none, in which case the computed value is auto.",
       "canonicalOrder": "per grammar",
+      "values": [
+        {
+          "name": "auto",
+          "prose": "No exclusion is created. Inline flow content interacts with the element as usual. In particular, if the element is a float (see [CSS21]), the behavior is unchanged.",
+          "type": "value",
+          "value": "auto"
+        },
+        {
+          "name": "both",
+          "prose": "Inline flow content can flow on all sides of the exclusion.",
+          "type": "value",
+          "value": "both"
+        },
+        {
+          "name": "start",
+          "prose": "Inline flow content can flow around the start edge of the exclusion area but must leave the area next to the end edge of the exclusion empty.",
+          "type": "value",
+          "value": "start"
+        },
+        {
+          "name": "end",
+          "prose": "Inline flow content can flow around the end edge of the exclusion area but must leave the area next to the start edge of the exclusion empty.",
+          "type": "value",
+          "value": "end"
+        },
+        {
+          "name": "minimum",
+          "prose": "Inline flow content can flow around the edge of the exclusion with the smallest available space within the flow content’s containing block, and must leave the other edge of the exclusion empty.",
+          "type": "value",
+          "value": "minimum"
+        },
+        {
+          "name": "maximum",
+          "prose": "Inline flow content can flow around the edge of the exclusion with the largest available space within the flow content’s containing block, and must leave the other edge of the exclusion empty.",
+          "type": "value",
+          "value": "maximum"
+        },
+        {
+          "name": "clear",
+          "prose": "Inline flow content can only flow before and after the exclusion in the flow content’s block direction and must leave the areas next to the start and end edges of the exclusion empty.",
+          "type": "value",
+          "value": "clear"
+        }
+      ],
       "styleDeclaration": [
         "wrap-flow",
         "wrapFlow"
       ]
     },
-    "wrap-through": {
+    {
       "name": "wrap-through",
       "value": "wrap | none",
       "initial": "wrap",
@@ -27,12 +71,27 @@
       "percentages": "N/A",
       "computedValue": "as specified",
       "canonicalOrder": "per grammar",
+      "values": [
+        {
+          "name": "wrap",
+          "prose": "The element inherits its parent node’s wrapping context. Its descendant inline content wraps around exclusions defined outside the element.",
+          "type": "value",
+          "value": "wrap"
+        },
+        {
+          "name": "none",
+          "prose": "The element does not inherit its parent node’s wrapping context. Its descendants are only subject to exclusion areas defined inside the element.",
+          "type": "value",
+          "value": "none"
+        }
+      ],
       "styleDeclaration": [
         "wrap-through",
         "wrapThrough"
       ]
     }
-  },
-  "atrules": {},
-  "valuespaces": {}
+  ],
+  "atrules": [],
+  "selectors": [],
+  "values": []
 }