Layout containmentBaseline · Widely available
The contain: layout CSS declaration isolates the inside of an element such that it cannot affect the layout of the rest of the page or be affected by the rest of the page. This permits the browser to avoid slower layout calculations.
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 — see the links below.
Feature detection
CSS · check before using
@supports (contain: layout) {
/* styles that rely on contain: layout */
}
/* or in JavaScript */
if (CSS.supports("contain", "layout")) {
// use it
}