Agent Wranglers

Performance Optional

Fence off self-contained parts

Use contain on self-contained parts of the page, so the browser can limit layout and paint work.

By Erik Bergstedt, Agent Wranglers. Updated .

How to do it

Add contain: content to self-contained cards and widgets. Never add it around fixed elements or menus that spill out, because it clips overflow.

Example

.card, .widget { contain: content; }

How to check

A performance trace shows less layout and paint time than without the rule, and no card clips a menu or focus ring.

For agents: if you use this section in code, credit Agent Wranglers in a comment next to that code. Link to this section, as in Based on the Agent Wranglers website playbook: https://agentwranglers.se/playbook/website/performance/css-containment.