带你读《2022技术人的百宝黑皮书》——下一代响应式Web设计: 组件驱动式Web设计(19)https://developer.aliyun.com/article/1340876?groupCode=taobaotech
定义一个包含性上下文
要使用 CSS 容器查询特性,首先要定义一个包含性上下文(Containment Context)。这个有点类似于使用Flexbox 和 Grid 布局(定义Flexbox 或 Grid 上下文使用的是 display 属性),只不过,定义一个包含性的上下文使用的不是我们熟知的 display 属性,而是一个新的CSS属性,即 container。
在一个元素上显式使用 container 可以告诉浏览器以后要针对这个容器进行查询,以及具体如何查询该特定的容器。比如,上面演示的示例中,我们在 .card__container 元素上(.card的父容器)显式设置了 container-type 的值为 inline-size:
.card__container { container-type: inline-size 3 }
上面的代码告诉浏览器,可以基于.card__container容器的内联轴(Inline Axis)方向尺寸变化进行查询。也就是说,当.card__container容器宽度大小变化到指定的某个值时,其后代元素的样式就可以进行调整。
container-type 是 container 属性中的一个子属性,另外,还可以显式使用 container-name 来命名你的容器, 即给一个包含性上下文指定一个具体的名称:
.card__container { container-name: card 3 }
这种方式对于同一个上下文中有多个包含性上下文时非常有意义,可以更明确地知道哪些查询会影响元素。 你可以使用简写属性container,只不过需要在 container-type 和 container-name 之间添加斜杠分割符/:
.card__container { container-type: inline-size; container-name: card; } /* 等同于 */ .card__container { container: inline-size / card; }
如果一个容器查询被应用到一个没有定义的包含祖先元素上,查询将无法应用。也就是说,无论是 body 还是 html 元素,都没有默认的回退包含上下文。另外,定义包含上下文名称时不能是 CSS 的关键词,比如 default、inher- it、initial 等。
注意:container-name 可以省略,如果省略将会使用其初始值none,但 container-type 不可省略,如果省略的话则表示未显式声明包含性上下文!
定义一个容器查询
现在我们知道使用 container(或其子属性 container-type和container-name)对一个元素显式声明包含上下文
(对一个元素应用包含性)。
有了这个包含性上下文之后,就可以使用 CSS 的 @ 规则@container来对应用了包含性元素进行查询,即对容器进行查询。@container 规则的使用和 @media 以及 @supports相似:
@container containerName size(width > 45rem) { /* 应用了包含性上下文后代元素的 CSS */ } @container size(width > 45rem) { /* 应用了包含性上下文后代元素的 CSS */ }
带你读《2022技术人的百宝黑皮书》——下一代响应式Web设计: 组件驱动式Web设计(21)https://developer.aliyun.com/article/1340874?groupCode=taobaotech