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，但它不适用于最新的语法。所以简短的回答是“不”，我肯定会敦促你在生产中使用它们之前等待一段时间。但是容器查询背后有很多动力，所以我希望很快会有更多的普遍支持。

转载请保留出处及原文地址:/index.php?r=article/Content/index&content_id=580