CSS的原生嵌套、作用域（@scope）、级联层（@layer）和容器查询（@container）被称为 下一代 CSS，并且在整个社区得到热议。比如，刚举办的 W3C TPAC 会议就专门有一个这方面的话题。尤其是容器查询（@container），更令人兴奋。从基于页面的响应式设计到基于容器的响应式设计的转变，将对Web设计生态系统的发展产生巨大的影响。因为，容器查询将使单个元素有可能根据局部的环境进行调整，而不是依赖整个视窗的尺寸。从今天开始，我将和大家一起进入容器查询的世界，和大家一起了解为什么需要容器查询，它们将来何使Web设计和开发变得更轻松，最重要的是，容器查询将现更强大的组件和布局，尤其是响应式的布局。

CSS的容器模块指的是CSS Containment Module，到目前为止主要分为 Level 1 和 Level 2两个版本。在容器模块中主要包含了CSS的 contain 和 content-visibility 两个属性。这两个属性都可以帮助我们提高Web页面的性能，那么它们是如何工作的？我们在实际项目中又应该怎么使用呢？如果你感兴趣的话，请继续往下阅读。