CSS Containment 是什么以及如何使用它？

Become a Supporter

成为支持者

Written by Harry Roberts on CSS Wizardry.

由 Harry Roberts 在 CSS Wizardry 上撰写。

Table of Contents

目录

Independent writing is brought to you via my wonderful Supporters.

独立写作通过我精彩的 Supporters 呈现给你。

1. Why Containment Exists
2. 为什么存在 Containment
3. Meet the contain Property
4. 认识 contain 属性
5. Layout Containment
6. Layout Containment
7. Paint Containment
8. 绘制包含
9. Size Containment
10. 尺寸包含
11. Style Containment
12. 样式包含
13. Special Values: content and strict
    1. contain: content 2. contain: strict
14. 特殊值：content 和 strict
    1. contain: content 2. contain: strict
15. Containment in the Real World
    1. OpenTable’s Mobile Drawer 2. Other Good Candidates
16. 真实世界中的包含
    1. OpenTable 的移动抽屉 2. 其他良好候选项
17. content-visibility and contain-intrinsic-size
    1. Skipping Work with content-visibility 2. Accessibility and Script Considerations
18. content-visibility 和 contain-intrinsic-size
    1. 使用 content-visibility 跳过工作 2. 可访问性和脚本注意事项
19. Caveats, Gotchas, and Things to Watch for
    1. Zero-Sized Boxes 2. Unexpected Clipping 3. Stacking Contexts Everywhere 4. Interaction with Container Queries
20. 注意事项、陷阱和需要留意的事项
    1. 零尺寸盒子 2. 意外裁剪 3. 层叠上下文无处不在 4. 与容器查询的交互
21. When to Use Containment
    1. Good Candidates 2. Use With Care 3. Probably Avoid
22. 何时使用包含
    1. 良好候选 2. 谨慎使用 3. 可能避免
23. Closing Thoughts
24. 结束语

Continuing my work on web performance for design systems, I want to look at a woefully underused CSS feature called containment. I fear it’s underused because there isn’t much written about it, so this piece aims to be the post I wish I’d been able to read a few years ago. Hopefully it demystifies things a little for you, too.

继续我关于 设计系统的 Web 性能 的工作，我想来看看一个严重未充分利用的 CSS 特性，名为 containment。我担心它未被充分利用是因为关于它的内容不多，所以这篇文章旨在成为几年前我希望能读到的那篇文章。希望它也能为你稍微揭开一些神秘面纱。

Modern UIs are busy places. A single page might contain a fixed header, an infinite scroll feed, a sticky cart summary, and a few different third-party widgets stuck around the edges. Every time something changes, the browser needs to decide how much of that page it has to re-think: styles, layout, painting, compositing, and so on.

现代 UI 是繁忙的地方。一个单页可能包含固定的页眉、无限滚动的内容流、粘性购物车摘要，以...