文章标签

现代 CSS 不断为我们提供许多新的、更轻松的方法来解决旧问题，但通常我们获得的新功能不仅能解决旧问题，还能开辟新的可能性。

容器查询 就是其中之一...

CSS container 属性是一个简写属性，它将 container-name 和 container-type 属性合并到一个声明中。

.parent {
  container: cards-grid / inline-size;

  /* Equivalent to: */
  container-name: cards-grid;
  container-type: inline-size;
}

container 属性是...

CSS container-type 属性是容器查询功能的一部分，用于将元素注册为容器，当容器满足某些条件时，它可以对其他元素应用样式。

.parent {
  container-type: inline-size;
}

@container (width < 500px) 

CSS container-name 属性用于将元素注册为容器，该容器根据容器的大小和样式对其他元素应用样式。

.parent {
  container-name: cards;
  container-type: inline-size;
}

@container cards (width 800px) {
  .child {
    

CSS 容器查询仍在不断发展，我们许多人都在尝试使用它们，即使只是用于一些小实验。它们的功能非常强大，但还没有完全成熟，浏览器支持 已经足够好，足以让人们开始使用...

我在前段时间写了一些关于 容器样式查询的早期想法。现在还处于早期阶段。它们已在 CSS Containment 模块级别 3 规范（目前处于编辑草案状态）中定义，但仍然有一些...

我们现在还处于容器查询的超级早期阶段。 浏览器支持还太早，但 Chromium 已经支持它，Safari 在版本 16 中开始支持它，Firefox 也应该 不会落后太远。

大多数早期阶段的对话...

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