CSS Containment
CSS Containment — Optimize rendering performance with CSS containment: the contain property, size/layout/style/paint values, and content-visibility. The guide walks through What is CSS Containment?, contain: layout, contain: paint and contain: style, contain: size, content-visibility, Practical Performance Patterns. CSS containment is a performance optimization technique that tells the browser that certain parts of the page are independent from the rest. By isolating subtrees, the browser can skip layout, style, and paint work for contained elements when only other parts of the page change. The contain property has four possible values that can be combined: .element { contain: layout;… Layout containment tells the browser that changes inside the element won't affect the layout of the rest of the page, and vice versa. .container { contain: layout; } What it does: - Creates a new formatting context - Acts as a containing block for absolute/fixed descendants - Acts as a stacking context - Prevents floats from escaping the container -…