Containment & container queries

contain

Promises the browser that an element's subtree is independent of the rest of the page in one or more ways, so it can lay out, paint or style that part on its own and skip it when nothing inside has changed.

.widget { contain: content; }

content-visibility

Lets the browser skip rendering an element's contents. With auto the contents are only laid out and painted when the element is near the viewport; with hidden they are never rendered, but unlike display: none the browser can keep their rendering state cached.

auto turns on layout, style and paint containment, plus size containment while the contents are skipped. Skipped contents stay in the document, so they can still be found with find-in-page and reached by keyboard focus. Give the element a placeholder size with contain-intrinsic-size so the scrollbar does not jump as sections render.

article > section {
  content-visibility: auto;
  contain-intrinsic-size: auto 40rem;
}

contain-intrinsic-size

Shorthand for contain-intrinsic-width and contain-intrinsic-height: the size an element with size containment is given, as if its contents were that size. One value sets both axes; two set width then height.

With auto, once the element has been rendered the browser remembers its real size and uses that instead of the length while its contents are skipped.

contain-intrinsic-width, contain-intrinsic-height, contain-intrinsic-block-size, contain-intrinsic-inline-size

The placeholder size in one axis: physical for -width and -height, flow-relative for -block-size and -inline-size. none means the element is sized as if empty in that axis.

container

Shorthand for container-name and, after a slash, container-type.

.cards { container: cards / inline-size; }

@container cards (width > 40rem) {
  .card { grid-template-columns: 1fr 2fr; }
}

container-name

One or more names for a query container, so an @container rule can target it by name instead of the nearest suitable ancestor.

container-type

Makes an element a query container for size queries, scroll-state queries or both.

inline-size is the usual choice. Because of the containment, a container cannot size itself from its children in the queried axis; give it a width from its parent layout.

will-change

Tells the browser which properties of an element are about to change, so it can prepare, for example by moving the element to its own compositing layer. An <animateable-feature> is scroll-position, contents or a property name.

Naming a property that would create a stacking context or containing block, such as opacity or transform, makes the element create one straight away. Use it sparingly, on elements that really are about to animate, since each hint costs memory.

.drawer { will-change: transform; }