带你读《2022技术人的百宝黑皮书》——下一代响应式Web设计： 组件驱动式Web设计（17）https://developer.aliyun.com/article/1340878?groupCode=taobaotech
这个提议已经被 W3C 的 CSS 工作组采纳（地址：https://drafts.csswg.org/css-contain-3/），并已经添加到CSS Containment Module Level 3（地址：https://www.w3.org/TR/css-contain-3/）模块中。有关于该功能的相关问题和各网格平台推进进度，可以点击这里查阅（地址：https://github.com/w3c/csswg-drafts/proj- ects/18）。
虽然 CSS Containment Module Level 3 还是 FPWD 版本，规范中所描述的语法不是最终版本，直到写这篇文章，其语法规则还在变，因此文章中所展示的语法有可能会变以及相关的示例有一天就无效了：
什么是容器查询
CSS 容器查询最大的特点是：
容器查询允许开发者定义任何一个元素为包含上下文，查询容器的后代元素可以根据查询容器的大小或计算样式的变化来改变风格！
换句话说，一个查询容器是通过使用容器类型属性（container-type或container）指定要能的查询类型来建立的。适用于其后代的样式规则可以通过使用@container条件组规则对其进行查询来设定条件。
容器查询为响应式设计提供了一种更加动态的方法。这意味着，如果你将此卡片组件放在侧边栏或放在页面主体内部的网格中，则该组件本身根据容器而不是视口进行响应式的信息展示。
首先，把卡片放到一个容器元素中，比如.card__container：
<!-- HTML --> <div class="card__container"> <div class="card"> <img src="https://picsum.photos/2568/600?random=1" width="2568" height="600" alt="" class="card__thumbnail" /> <div class="card__badge">Must Try</div> <h3 class="card__title">Best Brownies in Town</h3> <p class="card__describe">High quality ingredients and best in-class chef. Light, tender, and easy to make~</p> <button class="card__button">Order now</button> </div> </div>
也就是说，当卡片组件被放在一个容器中时，代表着它被包含在该容器中，比如上面代码中的.card__container。这也意味着，我们可以使用 CSS 的 container来查询.card__container 的宽度，并在@container 对 .card 设置不同的样式规则。从而达到设计师真正的意图：
带你读《2022技术人的百宝黑皮书》——下一代响应式Web设计： 组件驱动式Web设计（19）https://developer.aliyun.com/article/1340876?groupCode=taobaotech
