Skip to content
TopicTracker
From HackerNewsView original
TranslationTranslation

What Is CSS Containment and How Can I Use It?

CSS Containment is a performance feature that allows developers to isolate parts of the DOM, limiting the scope of style recalculations, layout, and paint work. By using properties like contain: layout, contain: paint, and contain: size, developers can improve rendering performance, particularly in dynamic or large-page scenarios.

Background

- CSS Containment is a browser-performance feature that lets a developer tell the browser which page regions are self‑contained, so layout/paint/style recalculations can be skipped when unrelated parts change. - The core property is `contain` with keywords `layout`, `paint`, `size`, `style`. Common shorthands: `contain: strict` (all of the above, minus style in some spec versions) or `contain: content` (layout + paint). - `content-visibility` is a related property that adds lazy rendering: off‑screen elements aren't painted at all — ideal for long scrollable lists or feeds. - Historically, performance debugging in CSS was tricky; devs used `will-change` or `transform: translateZ(0)` to force compositor layers. Containment offers a cleaner, spec‑driven alternative. - Browser support: `contain` works in Chrome, Edge, Safari 15.4+, Firefox 115+. `content-visibility` is broadly available in modern browsers. - Why it matters: on large pages (catalogs, dashboards, feeds), one change can trigger a full‑page reflow. Containment scopes re-layout/paint to specific containers, making interactions smoother and runtime more predictable.

Related stories