iShadeed 的容器查询实验室

Ahmad Shadeed 在容器查询方面抢先一步，并拥有一个 不断增长的示例集合，这些示例基于日常模式。

此外，如果您错过了，他的 关于容器查询的最新文章 精彩地介绍了它们自本月在 Chrome 105 中上线以来的工作原理（我们将在 Safari 16 中很快看到它们）。一些精选亮点和要点

• 容器使用 container-type 属性定义。以前的演示和提案一直使用 contain 代替。
• 容器查询非常类似于我们一直以来一直在编写的针对视窗大小的媒体查询。因此，我们不是使用类似 @media (min-width: 600px) {} 的东西，而是使用 @container (min-width: 600px) {}。这应该使将许多媒体查询转换为容器查询变得相当容易，减去找出新断点值的工作。
• 我们可以为容器命名以帮助区分代码中的容器（例如 container-name: blockquote）。

Ahmad，做得棒！感谢分享！

直接链接 →