css-contain.json

{
  "spec": {
    "title": "CSS Containment Module Level 2",
    "url": "https://drafts.csswg.org/css-contain-2/"
  },
  "properties": [
    {
      "name": "contain",
      "href": "https://drafts.csswg.org/css-contain-2/#propdef-contain",
      "value": "none | strict | content | [ [size | inline-size] || layout || style || paint ]",
      "initial": "none",
      "appliesTo": "See below",
      "inherited": "no",
      "percentages": "n/a",
      "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.",
          "href": "https://drafts.csswg.org/css-contain-2/#valdef-contain-none",
          "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.",
          "href": "https://drafts.csswg.org/css-contain-2/#valdef-contain-strict",
          "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.",
          "href": "https://drafts.csswg.org/css-contain-2/#valdef-contain-content",
          "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.",
          "href": "https://drafts.csswg.org/css-contain-2/#valdef-contain-size",
          "type": "value",
          "value": "size"
        },
        {
          "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.",
          "href": "https://drafts.csswg.org/css-contain-2/#valdef-contain-inline-size",
          "type": "value",
          "value": "inline-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.",
          "href": "https://drafts.csswg.org/css-contain-2/#valdef-contain-layout",
          "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.",
          "href": "https://drafts.csswg.org/css-contain-2/#valdef-contain-style",
          "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.",
          "href": "https://drafts.csswg.org/css-contain-2/#valdef-contain-paint",
          "type": "value",
          "value": "paint"
        }
      ],
      "styleDeclaration": [
        "contain"
      ]
    },
    {
      "name": "content-visibility",
      "href": "https://drafts.csswg.org/css-contain-2/#propdef-content-visibility",
      "value": "visible | auto | hidden",
      "initial": "visible",
      "appliesTo": "elements for which size containment can apply",
      "inherited": "no",
      "percentages": "n/a",
      "computedValue": "as specified",
      "canonicalOrder": "per grammar",
      "animationType": "see § 4.1 Animating and Interpolating content-visibility",
      "values": [
        {
          "name": "visible",
          "prose": "No effect. The element’s contents are laid out and rendered as normal.",
          "href": "https://drafts.csswg.org/css-contain-2/#valdef-content-visibility-visible",
          "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.",
          "href": "https://drafts.csswg.org/css-contain-2/#valdef-content-visibility-hidden",
          "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.",
          "href": "https://drafts.csswg.org/css-contain-2/#valdef-content-visibility-auto",
          "type": "value",
          "value": "auto"
        }
      ],
      "styleDeclaration": [
        "content-visibility",
        "contentVisibility"
      ]
    }
  ],
  "atrules": [],
  "selectors": [],
  "values": []
}