2022 年网站建设的新 CSS 功能
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;
}
}
SS Containment Level 3 规范目前处于工作草案中，这意味着语法可能随时改变——事实上，自从去年发表了一些关于容器查询的文章以来，它已经改变了。此处的示例与撰写本文时建议的语法一致。
Chrome 声称支持标志后面的容器查询，但工作实现似乎与当前规范不一致。有一个 polyfill，但它不适用于最新的语法。所以简短的回答是“不”，我肯定会敦促你在生产中使用它们之前等待一段时间。但是容器查询背后有很多动力，所以我希望很快会有更多的普遍支持。
相关资讯
阿里云、腾讯云、华为云严选优质服务商
