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

从《初探CSS容器查询》一文中我们知道了容器查询是是什么以及它的作用。使用 contain来创建一个包含上下文，同时使用 @container 规则，可以在符合条件下为查询容器的后代单独指定样式规则。简单地说，可以使用 CSS 容器查询，让同一个组件根据其容器的不同尺寸向用户呈现不同的UI效果。该特性目前是 CSS Containment Level 3 中的一个特性，这个功能模块中除了 contain 和 @container 之外，还新增了一个容器属性 container，也可以使用 container 和 @container 结合实现容器查询效果。在这篇文章中，我们就来看看 container 和 @container 是如何工作的，它们可能会有哪些功能！感兴趣的同学，请继续往下阅读！

十年前的 CSS 媒体查询 特性给 Web设计和开发带来新的变革，十年后的今天，CSS的容器查询 给 Web 设计和开发又进一步的带来质的变革。虽然CSS容器查询特性很强大，但它还只是部分主流浏览器的实验属性。因此要用到生产中还有要能要走一段漫长的路。不过，庆幸的是，现代的一些 Web 技术（比如，Flexbox、Grid、媒体查询和比较函数等）让我们离容器查询特性更近一步。今天我们来看看，这些现代Web技术是如何让我们离容器查询更近一步。

前段时间我们花了几篇篇幅的内容来介绍 CSS 容器查询特性的使用，并且介绍了现代 Web 布局技术让我们离 CSS 容器查询更近一步，但这些内容都只是和大家聊的是如何使用，以及其对 Web 开发者带来的变化。在介绍 CSS 容器查询特性的时候，也提到过，CSS 容器查询特性除了给 Web 开发者带来变化的同时也给 Web 设计者带来变化。那么，今天我们来和大家一起聊聊 CSS 容器查询给设计将带来什么样的变化。感兴趣的同学，请继续往下阅读。

自从著名设计师 Ethan Marcotte（@beep）在 A List Apart 上发表了一篇名为《 Responsive Web Design 》的文章之后，响应式网页设计（RWD，即 Responsive Web Design）的身影就出现在了公众面前。自此就有了响应式 Web 设计这个概念。从提出这个概念到今天已经有十多年的时间了。在这十多年来，CSS 也发生了巨大的变化，新增了很多新的特性，近两年尤其如此（详细请参阅《2022 年的 CSS》一文）。这些变化，对于响应式Web设计的开发也有较大的改变。Una Kravets（@Una）大神，在2021的Google I/O 大会上的分享，提出 新的响应式：组件驱动式 Web 设计。 Web 生态即将进入响应式 Web 设计的新时代，并转变我们对其含义的看法，也为会Web设计带来新的变化。组件式驱动 Web 设计（或开发）也被称为是下一代响应式 Web 设计（或开发）。如果你对这方面话题感兴趣的话，请继续往下阅读。