2022 年对于 CSS 来说将是非常棒的一年，大量的新功能即将出现。有些已经开始登陆浏览器，有些可能会在 2022 年获得广泛的浏览器支持，而对于一两个人来说，这个过程可能会更长一些。在本文中，我们将看看其中的一些。

容器查询 #
我们如何使用它们？ #
对于容器查询，我们需要使用container属性（container-typeand的简写container-name）指定一个元素作为我们的容器。container-type可以是width、height或。_ 和是逻辑属性，根据文档的书写方式可能会产生不同的结果。inline-sizeblock-sizeinline-sizeblock-size

main, aside {
container: inline-size;
}

然后我们可以以@container类似于媒体查询的方式使用 at 规则。inline-size > 30em请注意在括号（而不是min-width: 30em）内表达规则的不同方式。这是Media Queries Level 4 规范的一部分。对于上面的卡片布局示例，当容器宽于 30rem 时，我们使用 flexbox 切换到水平布局：

@container (inline-size > 30em) {
.card {
display: flex;
}
}