@webref/css 5.4.4 → 6.0.0

package/css-conditional-4.json

@@ -3,14 +3,19 @@
     "title": "CSS Conditional Rules Module Level 4",
     "url": "https://drafts.csswg.org/css-conditional-4/"
   },
-  "properties": {},
-  "atrules": {},
-  "valuespaces": {
-    "<supports-feature>": {
+  "properties": [],
+  "atrules": [],
+  "selectors": [],
+  "values": [
+    {
+      "name": "<supports-feature>",
+      "type": "type",
       "value": "<supports-selector-fn> | <supports-decl>"
     },
-    "<supports-selector-fn>": {
+    {
+      "name": "<supports-selector-fn>",
+      "type": "type",
       "value": "selector( <complex-selector> )"
     }
-  }
+  ]
 }

package/css-conditional-5.json

@@ -3,35 +3,54 @@
     "title": "CSS Conditional Rules Module Level 5",
     "url": "https://drafts.csswg.org/css-conditional-5/"
   },
-  "properties": {},
-  "atrules": {
-    "@when": {
-      "value": "@when <boolean-condition> { <stylesheet> }",
-      "descriptors": []
+  "properties": [],
+  "atrules": [
+    {
+      "name": "@when",
+      "prose": "The @when at-rule is a conditional group rule that generalizes the individual conditional group rules such as @media and @supports. It is defined as:",
+      "descriptors": [],
+      "value": "@when <boolean-condition> { <stylesheet> }"
     },
-    "@else": {
-      "value": "@else <boolean-condition>? { <stylesheet> }",
-      "descriptors": []
+    {
+      "name": "@else",
+      "prose": "The @else rule is a conditional group rule used to form conditional rule chains, which associate multiple conditional rules and guarantee that only the first one that matches will evaluate its condition as true. It is defined as:",
+      "descriptors": [],
+      "value": "@else <boolean-condition>? { <stylesheet> }"
     }
-  },
-  "valuespaces": {
-    "<supports-feature>": {
+  ],
+  "selectors": [],
+  "values": [
+    {
+      "name": "<supports-feature>",
+      "type": "type",
       "value": "<supports-selector-fn> | <supports-font-tech-fn> | <supports-font-format-fn> | <supports-decl>"
     },
-    "<supports-font-tech-fn>": {
+    {
+      "name": "<supports-font-tech-fn>",
+      "type": "type",
       "value": "font-tech( <font-tech> )"
     },
-    "<font-tech>": {
-      "value": "[ features-opentype | features-aat | features-graphite | color-colrv0 | color-colrv1 | color-svg | color-sbix | color-cbdt | variations | palettes | incremental ]"
-    },
-    "<supports-font-format-fn>": {
+    {
+      "name": "<supports-font-format-fn>",
+      "type": "type",
       "value": "font-format( <font-format> )"
     },
-    "<media()>": {
+    {
+      "name": "media()",
+      "type": "function",
       "value": "media( [ <mf-plain> | <mf-boolean> | <mf-range> ] )"
     },
-    "<supports()>": {
+    {
+      "name": "supports()",
+      "type": "function",
       "value": "supports( <declaration> )"
     }
-  }
+  ],
+  "warnings": [
+    {
+      "msg": "Missing definition",
+      "name": "<font-format",
+      "value": "[ collection | embedded-opentype | opentype | svg | truetype | woff | woff2 ]"
+    }
+  ]
 }

package/css-conditional.json

@@ -3,29 +3,42 @@
     "title": "CSS Conditional Rules Module Level 3",
     "url": "https://drafts.csswg.org/css-conditional-3/"
   },
-  "properties": {},
-  "atrules": {
-    "@media": {
-      "value": "@media <media-query-list> { <stylesheet> }",
-      "descriptors": []
+  "properties": [],
+  "atrules": [
+    {
+      "name": "@media",
+      "prose": "The @media rule is a conditional group rule whose condition is a media query. Its syntax is:",
+      "descriptors": [],
+      "value": "@media <media-query-list> { <stylesheet> }"
     },
-    "@supports": {
-      "value": "@supports <supports-condition> { <stylesheet> }",
-      "descriptors": []
+    {
+      "name": "@supports",
+      "prose": "The @supports rule is a conditional group rule whose condition tests whether the user agent supports CSS property:value pairs. Authors can use it to write style sheets that use new features when available but degrade gracefully when those features are not supported. These queries are called CSS feature queries or (colloquially) supports queries.",
+      "descriptors": [],
+      "value": "@supports <supports-condition> { <stylesheet> }"
     }
-  },
-  "valuespaces": {
-    "<supports-condition>": {
+  ],
+  "selectors": [],
+  "values": [
+    {
+      "name": "<supports-condition>",
+      "type": "type",
       "value": "not <supports-in-parens> | <supports-in-parens> [ and <supports-in-parens> ]* | <supports-in-parens> [ or <supports-in-parens> ]*"
     },
-    "<supports-in-parens>": {
+    {
+      "name": "<supports-in-parens>",
+      "type": "type",
       "value": "( <supports-condition> ) | <supports-feature> | <general-enclosed>"
     },
-    "<supports-feature>": {
+    {
+      "name": "<supports-feature>",
+      "type": "type",
       "value": "<supports-decl>"
     },
-    "<supports-decl>": {
+    {
+      "name": "<supports-decl>",
+      "type": "type",
       "value": "( <declaration> )"
     }
-  }
+  ]
 }

package/css-contain-3.json

@@ -3,15 +3,23 @@
     "title": "CSS Containment Module Level 3",
     "url": "https://drafts.csswg.org/css-contain-3/"
   },
-  "properties": {
-    "contain": {
+  "properties": [
+    {
       "name": "contain",
       "newValues": "layout || style || paint || [ size | inline-size ]",
+      "values": [
+        {
+          "name": "inline-size",
+          "prose": "This value turns on inline-size containment for the element. This prevents the inline-size of its principal box from directly depending on its contents.",
+          "type": "value",
+          "value": "inline-size"
+        }
+      ],
       "styleDeclaration": [
         "contain"
       ]
     },
-    "container-type": {
+    {
       "name": "container-type",
       "value": "normal | size | inline-size",
       "initial": "normal",
@@ -21,12 +29,32 @@
       "computedValue": "the keyword normal or one or more of size, inline-size",
       "canonicalOrder": "per grammar",
       "animationType": "not animatable",
+      "values": [
+        {
+          "name": "size",
+          "prose": "Establishes a query container for container size queries on both the inline and block axis. Applies layout containment, style containment, and size containment to the principal box.",
+          "type": "value",
+          "value": "size"
+        },
+        {
+          "name": "inline-size",
+          "prose": "Establishes a query container for container size queries on the container’s own inline axis. Applies layout containment, style containment, and inline-size containment to the principal box.",
+          "type": "value",
+          "value": "inline-size"
+        },
+        {
+          "name": "normal",
+          "prose": "The element is not a query container for any container size queries, but remains a query container for container style queries.",
+          "type": "value",
+          "value": "normal"
+        }
+      ],
       "styleDeclaration": [
         "container-type",
         "containerType"
       ]
     },
-    "container-name": {
+    {
       "name": "container-name",
       "value": "none | <custom-ident>+",
       "initial": "none",
@@ -36,12 +64,26 @@
       "computedValue": "the keyword none, or an ordered list of identifiers",
       "canonicalOrder": "per grammar",
       "animationType": "not animatable",
+      "values": [
+        {
+          "name": "none",
+          "prose": "The query container has no query container name.",
+          "type": "value",
+          "value": "none"
+        },
+        {
+          "name": "<custom-ident>",
+          "prose": "Specifies a query container name as an identifier. The keywords none, and, not, and or are excluded from this <custom-ident>.",
+          "type": "value",
+          "value": "<custom-ident>"
+        }
+      ],
       "styleDeclaration": [
         "container-name",
         "containerName"
       ]
     },
-    "container": {
+    {
       "name": "container",
       "value": "<'container-name'> [ / <'container-type'> ]?",
       "initial": "see individual properties",
@@ -55,10 +97,11 @@
         "container"
       ]
     }
-  },
-  "atrules": {
-    "@container": {
-      "value": "@container <container-condition> { <stylesheet> }",
+  ],
+  "atrules": [
+    {
+      "name": "@container",
+      "prose": "The @container rule is a conditional group rule whose condition contains a container query, which is a boolean combination of container size queries and/or container style queries. Style declarations within the <stylesheet> block of an @container rule are filtered by its condition to only match when the container query is true for their element’s query container.",
       "descriptors": [
         {
           "name": "width",
@@ -94,35 +137,67 @@
           "name": "orientation",
           "for": "@container",
           "value": "portrait | landscape",
-          "type": "discrete"
+          "type": "discrete",
+          "values": [
+            {
+              "name": "portrait",
+              "prose": "The orientation container feature is portrait when the value of the height container feature is greater than or equal to the value of the width container feature.",
+              "type": "value",
+              "value": "portrait"
+            },
+            {
+              "name": "landscape",
+              "prose": "Otherwise orientation is landscape.",
+              "type": "value",
+              "value": "landscape"
+            }
+          ]
         }
-      ]
+      ],
+      "value": "@container <container-condition> { <stylesheet> }"
     }
-  },
-  "valuespaces": {
-    "<size-feature>": {
-      "prose": "A container size query allows querying the size of the query container’s principal box. It is a boolean combination of individual size features (<size-feature>) that each query a single, specific dimensional feature of the query container. The syntax of a <size-feature> is the same as for a media feature: a feature name, a comparator, and a value. [mediaqueries-5] The boolean syntax and logic combining size features into a size query is the same as for CSS feature queries. (See @supports. [CSS-CONDITIONAL-3])"
-    },
-    "<style-feature>": {
-      "prose": "A container style query allows querying the computed values of the query container. It is a boolean combination of individual style features (<style-feature>) that each query a single, specific property of the query container. The syntax of a <style-feature> is the same as for a declaration [CSS-SYNTAX-3], and its query is true if the computed value of the given property on the query container matches the given value (which is also computed with respect to the query container), unknown if the property or its value is invalid or unsupported, and false otherwise. The boolean syntax and logic combining style features into a style query is the same as for CSS feature queries. (See @supports. [CSS-CONDITIONAL-3])"
-    },
-    "<container-condition>": {
+  ],
+  "selectors": [],
+  "values": [
+    {
+      "name": "<container-condition>",
+      "type": "type",
       "value": "[ <container-name> ]? <container-query>"
     },
-    "<container-name>": {
+    {
+      "name": "<container-name>",
+      "type": "type",
       "value": "<custom-ident>"
     },
-    "<container-query>": {
+    {
+      "name": "<container-query>",
+      "type": "type",
       "value": "not <query-in-parens> | <query-in-parens> [ [ and <query-in-parens> ]* | [ or <query-in-parens> ]* ]"
     },
-    "<query-in-parens>": {
+    {
+      "name": "<query-in-parens>",
+      "type": "type",
       "value": "( <container-query> ) | ( <size-feature> ) | style( <style-query> ) | <general-enclosed>"
     },
-    "<style-query>": {
+    {
+      "name": "<style-query>",
+      "type": "type",
       "value": "not <style-in-parens> | <style-in-parens> [ [ and <style-in-parens> ]* | [ or <style-in-parens> ]* ] | <style-feature>"
     },
-    "<style-in-parens>": {
+    {
+      "name": "<style-in-parens>",
+      "type": "type",
       "value": "( <style-query> ) | ( <style-feature> ) | <general-enclosed>"
+    },
+    {
+      "name": "<size-feature>",
+      "prose": "A container size query allows querying the size of the query container’s principal box. It is a boolean combination of individual size features (<size-feature>) that each query a single, specific dimensional feature of the query container. The syntax of a <size-feature> is the same as for a media feature: a feature name, a comparator, and a value. [mediaqueries-5] The boolean syntax and logic combining size features into a size query is the same as for CSS feature queries. (See @supports. [CSS-CONDITIONAL-3])",
+      "type": "type"
+    },
+    {
+      "name": "<style-feature>",
+      "prose": "A container style query allows querying the computed values of the query container. It is a boolean combination of individual style features (<style-feature>) that each query a single, specific property of the query container. The syntax of a <style-feature> is the same as for a declaration [CSS-SYNTAX-3], and its query is true if the computed value of the given property on the query container matches the given value (which is also computed with respect to the query container), unknown if the property or its value is invalid or unsupported, and false otherwise. The boolean syntax and logic combining style features into a style query is the same as for CSS feature queries. (See @supports. [CSS-CONDITIONAL-3])",
+      "type": "type"
     }
-  }
+  ]
 }

package/css-contain.json

@@ -3,8 +3,8 @@
     "title": "CSS Containment Module Level 2",
     "url": "https://drafts.csswg.org/css-contain-2/"
   },
-  "properties": {
-    "contain": {
+  "properties": [
+    {
       "name": "contain",
       "value": "none | strict | content | [ size || layout || style || paint ]",
       "initial": "none",
@@ -14,11 +14,55 @@
       "computedValue": "the keyword none or one or more of size, layout, paint",
       "canonicalOrder": "per grammar",
       "animationType": "not animatable",
+      "values": [
+        {
+          "name": "none",
+          "prose": "This value indicates that the property has no effect. The element renders as normal, with no containment effects applied.",
+          "type": "value",
+          "value": "none"
+        },
+        {
+          "name": "strict",
+          "prose": "This value computes to size layout paint style, and thus turns on all forms of containment for the element.",
+          "type": "value",
+          "value": "strict"
+        },
+        {
+          "name": "content",
+          "prose": "This value computes to layout paint style, and thus turns on all forms of containment except size containment for the element.",
+          "type": "value",
+          "value": "content"
+        },
+        {
+          "name": "size",
+          "prose": "The value turns on size containment for the element. This ensures that the containment box can be laid out without needing to examine its descendants.",
+          "type": "value",
+          "value": "size"
+        },
+        {
+          "name": "layout",
+          "prose": "This value turns on layout containment for the element. This ensures that the containment box is totally opaque for layout purposes; nothing outside can affect its internal layout, and vice versa.",
+          "type": "value",
+          "value": "layout"
+        },
+        {
+          "name": "style",
+          "prose": "This value turns on style containment for the element. This ensures that, for properties which can have effects on more than just an element and its descendants, those effects don’t escape the element.",
+          "type": "value",
+          "value": "style"
+        },
+        {
+          "name": "paint",
+          "prose": "This value turns on paint containment for the element. This ensures that the descendants of the containment box don’t display outside its bounds, so if an element is off-screen or otherwise not visible, its descendants are also guaranteed to be not visible.",
+          "type": "value",
+          "value": "paint"
+        }
+      ],
       "styleDeclaration": [
         "contain"
       ]
     },
-    "content-visibility": {
+    {
       "name": "content-visibility",
       "value": "visible | auto | hidden",
       "initial": "visible",
@@ -28,12 +72,33 @@
       "computedValue": "as specified",
       "canonicalOrder": "per grammar",
       "animationType": "not animatable",
+      "values": [
+        {
+          "name": "visible",
+          "prose": "No effect. The element’s contents are laid out and rendered as normal.",
+          "type": "value",
+          "value": "visible"
+        },
+        {
+          "name": "hidden",
+          "prose": "The element skips its contents. The skipped contents must not be accessible to user-agent features, such as find-in-page, tab-order navigation, etc., nor be selectable or focusable.",
+          "type": "value",
+          "value": "hidden"
+        },
+        {
+          "name": "auto",
+          "prose": "Changes the used value of the contain property so as to turn on layout containment, style containment, and paint containment for the element. If the element is not relevant to the user, it also skips its contents. Unlike hidden, the skipped contents must still be available as normal to user-agent features such as find-in-page, tab order navigation, etc., and must be focusable and selectable as normal.",
+          "type": "value",
+          "value": "auto"
+        }
+      ],
       "styleDeclaration": [
         "content-visibility",
         "contentVisibility"
       ]
     }
-  },
-  "atrules": {},
-  "valuespaces": {}
+  ],
+  "atrules": [],
+  "selectors": [],
+  "values": []
 }