@webref/css 5.4.4 → 6.1.0

package/css-position.json

@@ -3,8 +3,8 @@
     "title": "CSS Positioned Layout Module Level 3",
     "url": "https://drafts.csswg.org/css-position-3/"
   },
-  "properties": {
-    "position": {
+  "properties": [
+    {
       "name": "position",
       "value": "static | relative | absolute | sticky | fixed",
       "initial": "static",
@@ -15,11 +15,43 @@
       "canonicalOrder": "per grammar",
       "animatable": "no",
       "animationType": "discrete",
+      "values": [
+        {
+          "name": "static",
+          "prose": "The box is not a positioned box, and is laid out according to the rules of its parent formatting context. The inset properties do not apply.",
+          "type": "value",
+          "value": "static"
+        },
+        {
+          "name": "relative",
+          "prose": "The box is laid out as for static, then offset from the resulting position. This offsetting is a purely visual effect, and does not affect the size or position of any other box, except insofar as it increases the scrollable overflow area of its ancestors. This positioning scheme is called relative positioning.",
+          "type": "value",
+          "value": "relative"
+        },
+        {
+          "name": "sticky",
+          "prose": "Identical to relative, except that its offsets are automatically adjusted in reference to the nearest ancestor scroll container’s scrollport (as modified by the inset properties) in whichever axes the inset properties are not both auto, to try to keep the box in view within its containing block as the user scrolls. This positioning scheme is called sticky positioning.",
+          "type": "value",
+          "value": "sticky"
+        },
+        {
+          "name": "absolute",
+          "prose": "The box is taken out of flow such that it has no impact on the size or position of its siblings and ancestors, and does not participate in its parent’s formatting context. Instead, the box is positioned and sized solely in reference to its absolute positioning containing block, as modified by the box’s inset properties, see § 4 Absolute Positioning Layout Model. It can overlap in-flow content or other absolutely positioned elements, and is included in the scrollable overflow area of the box that generates is containing block. This positioning scheme is called absolute positioning.",
+          "type": "value",
+          "value": "absolute"
+        },
+        {
+          "name": "fixed",
+          "prose": "Same as absolute, except the box is positioned and sized relative to a fixed positioning containing block (usually the viewport in continuous media, or the page area in paged media). The box’s position is fixed with respect to this reference rectangle: when attached to the viewport it does not move when the document is scrolled, and when attached to the page area is replicated on every page when the document is paginated. This positioning scheme is called fixed positioning and is considered a subset of absolute positioning. Authors may wish to specify fixed in a media-dependent way. For instance, an author may want a box to remain at the top of the viewport on the screen, but not at the top of each printed page. The two specifications may be separated by using an '@media' rule, as in: @media screen { h1#first { position: fixed } } @media print { h1#first { position: static } }",
+          "type": "value",
+          "value": "fixed"
+        }
+      ],
       "styleDeclaration": [
         "position"
       ]
     },
-    "top": {
+    {
       "name": "top",
       "value": "auto | <length-percentage>",
       "initial": "auto",
@@ -29,11 +61,31 @@
       "computedValue": "the keyword auto or a computed <length-percentage> value",
       "canonicalOrder": "per grammar",
       "animationType": "by computed value type",
+      "values": [
+        {
+          "name": "<length>",
+          "prose": "The inset is a fixed distance from the reference edge. Negative values are allowed.",
+          "type": "value",
+          "value": "<length>"
+        },
+        {
+          "name": "<percentage>",
+          "prose": "The inset is a percentage relative to the containing block’s size in the corresponding axis (e.g. width for left or right, height for top and bottom). For sticky positioned boxes, the inset is instead relative to the relevant scrollport’s size. Negative values are allowed.",
+          "type": "value",
+          "value": "<percentage>"
+        },
+        {
+          "name": "auto",
+          "prose": "Represents an unconstrained inset; the exact meaning depends on the positioning scheme.",
+          "type": "value",
+          "value": "auto"
+        }
+      ],
       "styleDeclaration": [
         "top"
       ]
     },
-    "right": {
+    {
       "name": "right",
       "value": "auto | <length-percentage>",
       "initial": "auto",
@@ -43,11 +95,31 @@
       "computedValue": "the keyword auto or a computed <length-percentage> value",
       "canonicalOrder": "per grammar",
       "animationType": "by computed value type",
+      "values": [
+        {
+          "name": "<length>",
+          "prose": "The inset is a fixed distance from the reference edge. Negative values are allowed.",
+          "type": "value",
+          "value": "<length>"
+        },
+        {
+          "name": "<percentage>",
+          "prose": "The inset is a percentage relative to the containing block’s size in the corresponding axis (e.g. width for left or right, height for top and bottom). For sticky positioned boxes, the inset is instead relative to the relevant scrollport’s size. Negative values are allowed.",
+          "type": "value",
+          "value": "<percentage>"
+        },
+        {
+          "name": "auto",
+          "prose": "Represents an unconstrained inset; the exact meaning depends on the positioning scheme.",
+          "type": "value",
+          "value": "auto"
+        }
+      ],
       "styleDeclaration": [
         "right"
       ]
     },
-    "bottom": {
+    {
       "name": "bottom",
       "value": "auto | <length-percentage>",
       "initial": "auto",
@@ -57,11 +129,31 @@
       "computedValue": "the keyword auto or a computed <length-percentage> value",
       "canonicalOrder": "per grammar",
       "animationType": "by computed value type",
+      "values": [
+        {
+          "name": "<length>",
+          "prose": "The inset is a fixed distance from the reference edge. Negative values are allowed.",
+          "type": "value",
+          "value": "<length>"
+        },
+        {
+          "name": "<percentage>",
+          "prose": "The inset is a percentage relative to the containing block’s size in the corresponding axis (e.g. width for left or right, height for top and bottom). For sticky positioned boxes, the inset is instead relative to the relevant scrollport’s size. Negative values are allowed.",
+          "type": "value",
+          "value": "<percentage>"
+        },
+        {
+          "name": "auto",
+          "prose": "Represents an unconstrained inset; the exact meaning depends on the positioning scheme.",
+          "type": "value",
+          "value": "auto"
+        }
+      ],
       "styleDeclaration": [
         "bottom"
       ]
     },
-    "left": {
+    {
       "name": "left",
       "value": "auto | <length-percentage>",
       "initial": "auto",
@@ -71,11 +163,31 @@
       "computedValue": "the keyword auto or a computed <length-percentage> value",
       "canonicalOrder": "per grammar",
       "animationType": "by computed value type",
+      "values": [
+        {
+          "name": "<length>",
+          "prose": "The inset is a fixed distance from the reference edge. Negative values are allowed.",
+          "type": "value",
+          "value": "<length>"
+        },
+        {
+          "name": "<percentage>",
+          "prose": "The inset is a percentage relative to the containing block’s size in the corresponding axis (e.g. width for left or right, height for top and bottom). For sticky positioned boxes, the inset is instead relative to the relevant scrollport’s size. Negative values are allowed.",
+          "type": "value",
+          "value": "<percentage>"
+        },
+        {
+          "name": "auto",
+          "prose": "Represents an unconstrained inset; the exact meaning depends on the positioning scheme.",
+          "type": "value",
+          "value": "auto"
+        }
+      ],
       "styleDeclaration": [
         "left"
       ]
     },
-    "inset-block-start": {
+    {
       "name": "inset-block-start",
       "value": "auto | <length-percentage>",
       "initial": "auto",
@@ -85,12 +197,32 @@
       "computedValue": "the keyword auto or a computed <length-percentage> value",
       "canonicalOrder": "per grammar",
       "animationType": "by computed value type",
+      "values": [
+        {
+          "name": "<length>",
+          "prose": "The inset is a fixed distance from the reference edge. Negative values are allowed.",
+          "type": "value",
+          "value": "<length>"
+        },
+        {
+          "name": "<percentage>",
+          "prose": "The inset is a percentage relative to the containing block’s size in the corresponding axis (e.g. width for left or right, height for top and bottom). For sticky positioned boxes, the inset is instead relative to the relevant scrollport’s size. Negative values are allowed.",
+          "type": "value",
+          "value": "<percentage>"
+        },
+        {
+          "name": "auto",
+          "prose": "Represents an unconstrained inset; the exact meaning depends on the positioning scheme.",
+          "type": "value",
+          "value": "auto"
+        }
+      ],
       "styleDeclaration": [
         "inset-block-start",
         "insetBlockStart"
       ]
     },
-    "inset-inline-start": {
+    {
       "name": "inset-inline-start",
       "value": "auto | <length-percentage>",
       "initial": "auto",
@@ -100,12 +232,32 @@
       "computedValue": "the keyword auto or a computed <length-percentage> value",
       "canonicalOrder": "per grammar",
       "animationType": "by computed value type",
+      "values": [
+        {
+          "name": "<length>",
+          "prose": "The inset is a fixed distance from the reference edge. Negative values are allowed.",
+          "type": "value",
+          "value": "<length>"
+        },
+        {
+          "name": "<percentage>",
+          "prose": "The inset is a percentage relative to the containing block’s size in the corresponding axis (e.g. width for left or right, height for top and bottom). For sticky positioned boxes, the inset is instead relative to the relevant scrollport’s size. Negative values are allowed.",
+          "type": "value",
+          "value": "<percentage>"
+        },
+        {
+          "name": "auto",
+          "prose": "Represents an unconstrained inset; the exact meaning depends on the positioning scheme.",
+          "type": "value",
+          "value": "auto"
+        }
+      ],
       "styleDeclaration": [
         "inset-inline-start",
         "insetInlineStart"
       ]
     },
-    "inset-block-end": {
+    {
       "name": "inset-block-end",
       "value": "auto | <length-percentage>",
       "initial": "auto",
@@ -115,12 +267,32 @@
       "computedValue": "the keyword auto or a computed <length-percentage> value",
       "canonicalOrder": "per grammar",
       "animationType": "by computed value type",
+      "values": [
+        {
+          "name": "<length>",
+          "prose": "The inset is a fixed distance from the reference edge. Negative values are allowed.",
+          "type": "value",
+          "value": "<length>"
+        },
+        {
+          "name": "<percentage>",
+          "prose": "The inset is a percentage relative to the containing block’s size in the corresponding axis (e.g. width for left or right, height for top and bottom). For sticky positioned boxes, the inset is instead relative to the relevant scrollport’s size. Negative values are allowed.",
+          "type": "value",
+          "value": "<percentage>"
+        },
+        {
+          "name": "auto",
+          "prose": "Represents an unconstrained inset; the exact meaning depends on the positioning scheme.",
+          "type": "value",
+          "value": "auto"
+        }
+      ],
       "styleDeclaration": [
         "inset-block-end",
         "insetBlockEnd"
       ]
     },
-    "inset-inline-end": {
+    {
       "name": "inset-inline-end",
       "value": "auto | <length-percentage>",
       "initial": "auto",
@@ -130,12 +302,32 @@
       "computedValue": "the keyword auto or a computed <length-percentage> value",
       "canonicalOrder": "per grammar",
       "animationType": "by computed value type",
+      "values": [
+        {
+          "name": "<length>",
+          "prose": "The inset is a fixed distance from the reference edge. Negative values are allowed.",
+          "type": "value",
+          "value": "<length>"
+        },
+        {
+          "name": "<percentage>",
+          "prose": "The inset is a percentage relative to the containing block’s size in the corresponding axis (e.g. width for left or right, height for top and bottom). For sticky positioned boxes, the inset is instead relative to the relevant scrollport’s size. Negative values are allowed.",
+          "type": "value",
+          "value": "<percentage>"
+        },
+        {
+          "name": "auto",
+          "prose": "Represents an unconstrained inset; the exact meaning depends on the positioning scheme.",
+          "type": "value",
+          "value": "auto"
+        }
+      ],
       "styleDeclaration": [
         "inset-inline-end",
         "insetInlineEnd"
       ]
     },
-    "inset-block": {
+    {
       "name": "inset-block",
       "value": "<top>{1,2}",
       "initial": "auto",
@@ -145,12 +337,32 @@
       "computedValue": "see individual properties",
       "canonicalOrder": "per grammar",
       "animationType": "by computed value type",
+      "values": [
+        {
+          "name": "<length>",
+          "prose": "The inset is a fixed distance from the reference edge. Negative values are allowed.",
+          "type": "value",
+          "value": "<length>"
+        },
+        {
+          "name": "<percentage>",
+          "prose": "The inset is a percentage relative to the containing block’s size in the corresponding axis (e.g. width for left or right, height for top and bottom). For sticky positioned boxes, the inset is instead relative to the relevant scrollport’s size. Negative values are allowed.",
+          "type": "value",
+          "value": "<percentage>"
+        },
+        {
+          "name": "auto",
+          "prose": "Represents an unconstrained inset; the exact meaning depends on the positioning scheme.",
+          "type": "value",
+          "value": "auto"
+        }
+      ],
       "styleDeclaration": [
         "inset-block",
         "insetBlock"
       ]
     },
-    "inset-inline": {
+    {
       "name": "inset-inline",
       "value": "<top>{1,2}",
       "initial": "auto",
@@ -160,12 +372,32 @@
       "computedValue": "see individual properties",
       "canonicalOrder": "per grammar",
       "animationType": "by computed value type",
+      "values": [
+        {
+          "name": "<length>",
+          "prose": "The inset is a fixed distance from the reference edge. Negative values are allowed.",
+          "type": "value",
+          "value": "<length>"
+        },
+        {
+          "name": "<percentage>",
+          "prose": "The inset is a percentage relative to the containing block’s size in the corresponding axis (e.g. width for left or right, height for top and bottom). For sticky positioned boxes, the inset is instead relative to the relevant scrollport’s size. Negative values are allowed.",
+          "type": "value",
+          "value": "<percentage>"
+        },
+        {
+          "name": "auto",
+          "prose": "Represents an unconstrained inset; the exact meaning depends on the positioning scheme.",
+          "type": "value",
+          "value": "auto"
+        }
+      ],
       "styleDeclaration": [
         "inset-inline",
         "insetInline"
       ]
     },
-    "inset": {
+    {
       "name": "inset",
       "value": "<top>{1,4}",
       "initial": "auto",
@@ -175,11 +407,32 @@
       "computedValue": "see individual properties",
       "canonicalOrder": "per grammar",
       "animationType": "by computed value type",
+      "values": [
+        {
+          "name": "<length>",
+          "prose": "The inset is a fixed distance from the reference edge. Negative values are allowed.",
+          "type": "value",
+          "value": "<length>"
+        },
+        {
+          "name": "<percentage>",
+          "prose": "The inset is a percentage relative to the containing block’s size in the corresponding axis (e.g. width for left or right, height for top and bottom). For sticky positioned boxes, the inset is instead relative to the relevant scrollport’s size. Negative values are allowed.",
+          "type": "value",
+          "value": "<percentage>"
+        },
+        {
+          "name": "auto",
+          "prose": "Represents an unconstrained inset; the exact meaning depends on the positioning scheme.",
+          "type": "value",
+          "value": "auto"
+        }
+      ],
       "styleDeclaration": [
         "inset"
       ]
     }
-  },
-  "atrules": {},
-  "valuespaces": {}
+  ],
+  "atrules": [],
+  "selectors": [],
+  "values": []
 }

package/css-properties-values-api.json

@@ -3,10 +3,10 @@
     "title": "CSS Properties and Values API Level 1",
     "url": "https://drafts.css-houdini.org/css-properties-values-api-1/"
   },
-  "properties": {},
-  "atrules": {
-    "@property": {
-      "value": "@property <custom-property-name> { <declaration-list> }",
+  "properties": [],
+  "atrules": [
+    {
+      "name": "@property",
       "descriptors": [
         {
           "name": "syntax",
@@ -26,8 +26,10 @@
           "value": "<declaration-value>",
           "initial": "the guaranteed-invalid value (but see prose)"
         }
-      ]
+      ],
+      "value": "@property <custom-property-name> { <declaration-list> }"
     }
-  },
-  "valuespaces": {}
+  ],
+  "selectors": [],
+  "values": []
 }

package/css-pseudo.json

@@ -0,0 +1,67 @@
+{
+  "spec": {
+    "title": "CSS Pseudo-Elements Module Level 4",
+    "url": "https://drafts.csswg.org/css-pseudo-4/"
+  },
+  "properties": [],
+  "atrules": [],
+  "selectors": [
+    {
+      "name": "::first-line",
+      "prose": "The ::first-line pseudo-element represents the contents of the first formatted line of its originating element."
+    },
+    {
+      "name": "::first-letter",
+      "prose": "The ::first-letter pseudo-element represents the first Letter, Number, or Symbol (Unicode category L*, N*, or S*) typographic character unit on the first formatted line of its originating element (the first letter) as well as its associated punctuation. Collectively, this text is the first-letter text. The ::first-letter pseudo-element can be used to create “initial caps” and “drop caps”, which are common typographic effects.",
+      "values": [
+        {
+          "name": "::prefix",
+          "prose": "To allow independent styling of the first letter itself and its adjacent punctuation, associated preceding punctuation is represented by the ::prefix sub-pseudo-element of the ::first-letter pseudo-element (::first-letter::prefix); and associated following punctuation is represented by the ::postfix sub-pseudo-element of the ::first-letter pseudo-element (::first-letter::postfix). See § 2.2.1 First Letters and Associated Punctuation, below.",
+          "type": "selector"
+        },
+        {
+          "name": "::postfix",
+          "prose": "To allow independent styling of the first letter itself and its adjacent punctuation, associated preceding punctuation is represented by the ::prefix sub-pseudo-element of the ::first-letter pseudo-element (::first-letter::prefix); and associated following punctuation is represented by the ::postfix sub-pseudo-element of the ::first-letter pseudo-element (::first-letter::postfix). See § 2.2.1 First Letters and Associated Punctuation, below.",
+          "type": "selector"
+        }
+      ]
+    },
+    {
+      "name": "::selection",
+      "prose": "The ::selection pseudo-element represents the portion of a document that has been selected as the target or object of some possible future user-agent operation(s). It applies, for example, to selected text within an editable text field, which would be copied by a copy operation or replaced by a paste operation."
+    },
+    {
+      "name": "::target-text",
+      "prose": "The ::target-text pseudo-element represents text directly targeted by the document URL’s fragment, if any."
+    },
+    {
+      "name": "::spelling-error",
+      "prose": "The ::spelling-error pseudo-element represents a portion of text that has been flagged by the user agent as misspelled."
+    },
+    {
+      "name": "::grammar-error",
+      "prose": "The ::grammar-error pseudo-element represents a portion of text that has been flagged by the user agent as grammatically incorrect."
+    },
+    {
+      "name": "::before",
+      "prose": "Represents a styleable child pseudo-element immediately before the originating element’s actual content."
+    },
+    {
+      "name": "::after",
+      "prose": "Represents a styleable child pseudo-element immediately after the originating element’s actual content."
+    },
+    {
+      "name": "::marker",
+      "prose": "The ::marker pseudo-element represents the automatically generated marker box of a list item. (See [CSS-DISPLAY-3] and [CSS-LISTS-3].)"
+    },
+    {
+      "name": "::placeholder",
+      "prose": "The ::placeholder pseudo-element represents placeholder text in an input field: text that represents the input and provides a hint to the user on how to fill out the form. For example, a date-input field might have the placeholder text “YYYY/MM/DD” to clarify that numeric dates are to be entered in year-month-day order."
+    },
+    {
+      "name": "::file-selector-button",
+      "prose": "The ::file-selector-button pseudo-element targets the <button> inside an <input> element with type=file, if the UA renders such a button."
+    }
+  ],
+  "values": []
+}

package/css-regions.json

@@ -3,8 +3,8 @@
     "title": "CSS Regions Module Level 1",
     "url": "https://drafts.csswg.org/css-regions-1/"
   },
-  "properties": {
-    "flow-into": {
+  "properties": [
+    {
       "name": "flow-into",
       "value": "none | <ident> [element|content]?",
       "initial": "none",
@@ -19,7 +19,7 @@
         "flowInto"
       ]
     },
-    "flow-from": {
+    {
       "name": "flow-from",
       "value": "<ident> | none",
       "initial": "none",
@@ -34,7 +34,7 @@
         "flowFrom"
       ]
     },
-    "region-fragment": {
+    {
       "name": "region-fragment",
       "value": "auto | break",
       "initial": "auto",
@@ -49,7 +49,8 @@
         "regionFragment"
       ]
     }
-  },
-  "atrules": {},
-  "valuespaces": {}
+  ],
+  "atrules": [],
+  "selectors": [],
+  "values": []
 }