用途
CSS containment 规则用于在审查样式表、组件样式和响应式行为时，通过 CSS 包含限制重绘范围。默认情况下，页面任意位置的 CSS 变更都可能影响其他元素的布局。CSS containment 声明某些元素是隔离的——其内部变化不会影响外部世界。这使浏览器能够跳过未变化内容的大量渲染流程，对包含许多独立组件的页面尤其有价值。
主要能力
contain: layout style paint告诉浏览器某个组件在视觉上是自包含的。content-visibility: auto完全跳过屏幕外内容的渲染。- 包含限制布局重算需要传播的范围。
- 对没有溢出、不应影响页面的小部件使用
contain: strict。
使用方式
该规则提供以下操作方式：
- 检查：识别此 CSS 中视觉上自包含（无溢出、不与外部元素交互）且可受益于 CSS 包含的组件。
- 修复：为自包含组件添加适当的 contain 值。为重复的屏幕外列表项添加
content-visibility: auto。 - 解释：解释 CSS 包含值、它们如何限制渲染范围，以及
content-visibility: auto何时提供最大收益。 - 代码审查：审查与使用 CSS 包含限制重绘范围相关的样式表、组件样式和响应式状态。标记渲染 UI 中违反该规则的确切选择器、声明或断点。
完整实现细节、代码示例和框架特定指南，请参见 references/rule.md。
规则页面：https://frontendchecklist.io/en/rules/css/css-containment
适用场景
适用于审查样式表、组件样式和响应式行为，尤其是包含许多独立组件的页面，以及需要优化渲染性能、减少不必要重绘的场景。
限制
资料中未提供关于该规则的具体限制、兼容性要求或框架特定细节；完整实现细节需参见 references/rule.md。