css-contain-3.json

{
  "spec": {
    "title": "CSS Containment Module Level 3",
    "url": "https://drafts.csswg.org/css-contain-3/"
  },
  "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"
      ]
    },
    {
      "name": "container-type",
      "value": "normal | size | inline-size",
      "initial": "normal",
      "appliesTo": "all elements",
      "inherited": "no",
      "percentages": "n/a",
      "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"
      ]
    },
    {
      "name": "container-name",
      "value": "none | <custom-ident>+",
      "initial": "none",
      "appliesTo": "all elements",
      "inherited": "no",
      "percentages": "n/a",
      "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"
      ]
    },
    {
      "name": "container",
      "value": "<'container-name'> [ / <'container-type'> ]?",
      "initial": "see individual properties",
      "appliesTo": "see individual properties",
      "inherited": "see individual properties",
      "percentages": "see individual properties",
      "computedValue": "see individual properties",
      "animationType": "see individual properties",
      "canonicalOrder": "per grammar",
      "styleDeclaration": [
        "container"
      ]
    }
  ],
  "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",
          "for": "@container",
          "value": "<length>",
          "type": "range"
        },
        {
          "name": "height",
          "for": "@container",
          "value": "<length>",
          "type": "range"
        },
        {
          "name": "inline-size",
          "for": "@container",
          "value": "<length>",
          "type": "range"
        },
        {
          "name": "block-size",
          "for": "@container",
          "value": "<length>",
          "type": "range"
        },
        {
          "name": "aspect-ratio",
          "for": "@container",
          "value": "<ratio>",
          "type": "range"
        },
        {
          "name": "orientation",
          "for": "@container",
          "value": "portrait | landscape",
          "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> }"
    }
  ],
  "selectors": [],
  "values": [
    {
      "name": "<container-condition>",
      "type": "type",
      "value": "[ <container-name> ]? <container-query>"
    },
    {
      "name": "<container-name>",
      "type": "type",
      "value": "<custom-ident>"
    },
    {
      "name": "<container-query>",
      "type": "type",
      "value": "not <query-in-parens> | <query-in-parens> [ [ and <query-in-parens> ]* | [ or <query-in-parens> ]* ]"
    },
    {
      "name": "<query-in-parens>",
      "type": "type",
      "value": "( <container-query> ) | ( <size-feature> ) | style( <style-query> ) | <general-enclosed>"
    },
    {
      "name": "<style-query>",
      "type": "type",
      "value": "not <style-in-parens> | <style-in-parens> [ [ and <style-in-parens> ]* | [ or <style-in-parens> ]* ] | <style-feature>"
    },
    {
      "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"
    }
  ]
}