containBaseline · Widely available
The contain CSS property sets limits to the scope of styles, layout, and paint rendering for speed and efficiency. The none keyword value disables containment, strict is equivalent to contain: size layout style paint, and content is equivalent to contain: layout style paint.
Supported in all major browsers for at least 30 months — safe to use without fallbacks. Baseline since Mar 14, 2022. Widely available since Sep 14, 2024.
Browser support
DesktopChrome
1–51Not supported
52+Supportedsince Jul 20, 2016
Current: 155Edge
12–18Not supported
79+Supportedsince Jan 15, 2020
Current: 154Firefox
1–68Not supported
69+Supportedsince Sep 3, 2019
Current: 157Safari
1–15.3Not supported
15.4+Supportedsince Mar 14, 2022
Current: 27MobileChrome Android
18–51Not supported
52+Supportedsince Jul 27, 2016
Current: 155Firefox Android
4–68Not supported
79+Supportedsince Jul 28, 2020
Current: 157Safari iOS
1–15.3Not supported
15.4+Supportedsince Mar 14, 2022
Current: 27How to use
This feature is Baseline widely available — use it freely, no fallback needed.
Example
Full syntax and examples are on MDN: contain.
Feature detection
CSS · check before using
@supports (contain: initial) {
/* styles that rely on contain */
}
/* or in JavaScript */
if (CSS.supports("contain", "initial")) {
// use it
}Documentation (MDN)
Specification
Usage share
Sub-features
Support for each part of the feature (4). The overall table above shows when the whole feature works.
| Sub-feature | Chrome | Edge | Firefox | Safari | Chrome Android | Firefox Android | Safari iOS |
|---|---|---|---|---|---|---|---|
| contain | 52 | 79 | 69 | 15.4 | 52 | 79 | 15.4 |
| contain.content | 52 | 79 | 69 | 15.4 | 52 | 79 | 15.4 |
| contain.none | 52 | 79 | 69 | 15.4 | 52 | 79 | 15.4 |
| contain.strict | 52 | 79 | 69 | 15.4 | 52 | 79 | 15.4 |