CSS Containment Module Level 2

https://www.w3.org/TR/css-contain-2/
Admin
CSS Containment Module Level 2 defines CSS properties like contain and content-visibility to isolate...
Tokens:10,456
Snippets:93
Trust Score:10
Update:1 week ago
Show doc for...
Tokens:
Raw
### HTML markup for independent widgets

Source: https://www.w3.org/TR/css-contain-2

Example markup for a micropost social network page with many independent message articles. Used to illustrate applying contain: content or contain: strict to each article so the user agent can optimize rendering.

```html
<body>
  <aside>...</aside>
  <section>
    <h2>Messages</h2>
    <article>
      Lol, check out this dog: images.example.com/jsK3jkl
    </article>
    <article>
      I had a ham sandwich today. #goodtimes
    </article>
    <article>
      I have political opinions that you need to hear!
    </article>
    …
  </section>
</body>
```

--------------------------------

### content-visibility: auto example

Source: https://www.w3.org/TR/css-contain-2

Use content-visibility: auto to let the user-agent skip rendering of off-screen content. When the element is near the viewport, the user-agent paints it; when it moves away, it stops painting and skips as much rendering work as possible.

```html
<style>
.sv {
  content-visibility: auto;
  min-height: 50px;
}
</style>

<div class=sv>
  ... some content goes here ...
</div>

```

--------------------------------

### content-visibility: hidden example

Source: https://www.w3.org/TR/css-contain-2

Use content-visibility: hidden to skip rendering regardless of viewport intersection. The only way to paint the contents is via script updating the value to remove content-visibility or change its value. The user-agent should skip as much rendering work as possible.

```html
<style>
.sv {
  content-visibility: hidden;
}
</style>

<div class=sv>
  ... some content goes here ...
</div>

```

--------------------------------

### Style containment with counter-increment

Source: https://www.w3.org/TR/css-contain-2

Shows how style containment scopes counter-increment to the subtree. The first use of the counter inside the subtree acts as if it were set to 0 at the scoping element, so the displayed output is "1 1.2".

```html
<div></div>
```

```css
div {
  contain: style;
  counter-increment: n;
}
div::before, div::after {
  content: counters(n, '.') " ";
}
div::after {
  counter-increment: n 2;
}
```

--------------------------------

### Size containment with aspect-ratio

Source: https://www.w3.org/TR/css-contain-2

CSS rule and HTML markup showing that with size containment, the image is sized to 100px by 100px because the aspect-ratio property is honored. The width is set to 100px and the aspect-ratio to 1/1, while contain: size suppresses the natural aspect ratio but allows the preferred aspect ratio from aspect-ratio to take effect.

```css
img {
  width: 100px;
  aspect-ratio: 1/1;
  contain: size;
}
```

```html
<img src="https://www.example.com/300x100.jpg">
```

--------------------------------

### Forcing rendering work with getBoundingClientRect()

Source: https://www.w3.org/TR/css-contain-2

Shows that accessing a layout value (getBoundingClientRect()) inside a content-visibility: hidden element forces rendering work, including layout, if the user-agent previously avoided it. The result is a rect at (11, 22) with size 100x200. Repeated calls to the same layout value should not cause additional rendering work.

```html
<style>
body {
  margin: 0;
}
.sv {
  content-visibility: hidden;
  position: relative;
  left: 10px;
  top: 20px;
}
#child {
  position: relative;
  left: 1px;
  top: 2px;
  width: 100px;
  height: 200px;
}
</style>

<div id=target class=sv>
  <div id=child></div>
  ... some other content goes here ...
</div>
<script>
  ...
  // This will force rendering work, including layout,
  // if the UA previously avoided it.
  target.firstElementChild.getBoundingClientRect();
  ...
</script>

```

--------------------------------

### ContentVisibilityAutoStateChangedEvent

Source: https://www.w3.org/TR/css-contain-2

The ContentVisibilityAutoStateChangedEvent interface is an event that fires when the content-visibility auto state changes for an element. It includes a constructor and a readonly attribute indicating whether the content is skipped.

```APIDOC
## ContentVisibilityAutoStateChangedEvent

### Description
Fires when the content-visibility auto state changes for an element.

### Constructor
`ContentVisibilityAutoStateChangedEvent(type, eventInitDict)`

### Parameters
- **type** (DOMString) - Required - The event type.
- **eventInitDict** (ContentVisibilityAutoStateChangedEventInit) - Optional - Initialization dictionary.

### Attributes
- **skipped** (boolean) - Read-only - Indicates whether the content is skipped.

### Dictionary
`ContentVisibilityAutoStateChangedEventInit`

- **skipped** (boolean) - Optional - Default `false` - Indicates whether the content is skipped.
```
Tokens:
Raw