容器查询现已推出!
好消息 — 最受欢迎的开发者功能之一已开始在网络浏览器中推出!从 Chromium 105 和 Safari 16 开始,您现在可以在这些浏览器中创建基于大小的容器查询,并使用容器查询单元值。为了能够更轻松地使用基于大小的容器查询和 cq
单元,Chrome 的 Aurora 团队一直在努力更新 Container Query Polyfill,以支持更多浏览器和用例,让您可以放心地使用这一强大的功能。
什么是容器查询?
容器查询是一项 CSS 功能,可让您编写以父元素的特征为目标的样式设置逻辑,以设置其子元素的样式。您可以通过查询父项的尺寸,创建真正基于组件的自适应设计。与仅提供视口尺寸信息的媒体查询相比,此类信息更精细且更实用。
借助容器查询,您可以编写可重复使用的组件,这些组件可以根据它们在页面中的位置以不同的方式显示。这使得它们在页面和模板中具有更大的弹性和响应速度。
使用容器查询
假设您有一些 HTML:
<!-- card parent -->
<div class=”card-parent”>
<div class=”card>
<!-- card contents -->
…
</div>
</div>
要使用容器查询,您首先需要在要跟踪的父元素上设置包含关系。为此,请设置 container-type
属性,或使用 container
简写形式同时设置容器类型和容器名称。
.card-parent {
/* query the inline-direction size of this parent */
container-type: inline-size;
}
现在,您可以使用 @container
规则根据最近的父项设置样式。对于上图所示的设计,其中一张卡片可能会从一列变为两列,请按如下方式编写代码:
@container (min-width: 300px) {
.card {
/* styles to apply when the card container (.card-parent in this case) is >= 300px */
/* I.e. shift from 1-column to 2-column layout: */
grid-template-columns: 1fr 1fr;
}
}
为使父级元素容器更简洁明了,请为父级元素容器命名:
.card-parent {
container-type: inline-size;
/* set name here, or write this in one line using the container shorthand */
container-name: card-container;
}
然后将先前的代码重写为:
@container card-container (min-width: 300px) {
.card {
grid-template-columns: 1fr 1fr;
}
}
容器查询单元
为使容器查询更加实用,您也可以使用基于容器的单位值。下表显示了可能的容器单位值,以及这些值与容器大小的对应关系:
单位 | 相对于 |
---|---|
cqw | 查询容器宽度的 1% |
cqh | 查询容器高度的 1% |
cqi | 查询容器内嵌大小的 1% |
cqb | 查询容器块大小的 1% |
cqmin | cqi 或 cqb 的较小值 |
cqmax | cqi 或 cqb 的较大值 |
响应排版就是如何使用基于容器的单元的一个示例。基于视口的单位(例如 vh
、vb
、vw
和 vi
)可用于调整屏幕上任何元素的大小。
.card h2 {
font-size: 15cqi;
}
此代码会将字体大小设为容器内嵌大小的 15%,也就是说,随着内嵌大小(宽度)的增加,字体大小会增大,或者随着内嵌大小的减小而变小。为了进一步做到这一点,请使用 clamp()
函数为排版设置最小和最大大小限制,并根据容器大小相应地调整其大小:
.card h2 {
font-size: clamp(1.5rem, 15cqi, 3rem);
}
现在,标头永远不会大于 3rem
或小于 .5rem
,但它将占用容器的 15% 的内嵌大小。
此演示更进一步,更新了较宽的卡片,缩小了尺寸范围,因为它们采用 2 列视图呈现。
容器查询 polyfill
由于容器查询是一个非常强大的功能,因此我们希望您可以自如地将其整合到您的项目中,并且知道浏览器支持是其中的重要组成部分。因此,我们一直在努力改进 Container Query Polyfill。此 polyfill 提供以下方面的常规支持:
- Firefox 69 及更高版本
- Chrome 79 及更高版本
- Edge 79 及更高版本
- Safari 13.4 及更高版本
它在压缩后大小小于 9kb,并且结合使用 ResizeObserver 与 MutationObserver 可支持目前在稳定版浏览器中使用的完整 @container 查询语法:
- 离散查询(
width: 300px
和min-width: 300px
)。 - 范围查询(
200px < width < 400px
和width < 400px
)。 - 属性和关键帧中的容器相对长度单位(
cqw
、cqh
、cqi
、cqb
、cqmin
和cqmax
)。
使用容器查询 polyfill
要使用 polyfill,请将以下脚本标记添加到文档的标头中:
<script type="module">
if (!("container" in document.documentElement.style)) {
import("https://unpkg.com/container-query-polyfill@^0.2.0");
}
</script>
您可能还希望使用服务根据 User-Agent
有条件地提供 polyfill,或者将其自托管到您自己的源。
为提供最佳用户体验,建议您最初仅将 polyfill 用于非首屏内容,并使用 @supports
查询暂时将其替换为加载指示器,直到 polyfill 准备好显示它为止:
@supports not (container-type: inline-size) {
.container,
footer {
display: none;
}
.loader {
display: flex;
}
}
在速度足够快的网络和设备,或者原生支持容器查询的设备上,始终不会显示此加载指示器。
Polyfill 的新功能
更新后的 polyfill 支持:
- 嵌套的
@container
规则。 - 支持在
@supports
和@media
查询下嵌套@container
规则,反之亦然。 - 有条件的 CSS(例如
@supports (container-type: inline-size)
)会在 polyfill 加载后传递。 - 全面支持 CSS 语法(在语法上有效的任何位置添加注释时,不会再出现任何问题)。
- 垂直书写模式(通过书写模式)。
- 查询条件、属性声明和动画关键帧支持容器相对单位(
cqw
、cqh
等)。 查询条件支持rem
和em
。 - 扩展容器查询语法:
<ph type="x-smartling-placeholder">
- </ph>
- 范围语法(例如
(200px < width < 400px)
)。 - 等式查询(例如
(width = 200px)
)。
- 范围语法(例如
- 伪元素,如
::before
和::after
。 - 没有
:is(...)
/:where(...)
的浏览器可通过可选的权宜解决方法获得支持 orientation
和aspect-ratio
特征查询。- 根据功能正确过滤查询(例如,在水平写入模式下正确禁止在
container: inline-size
上查询height
)。 - DOM 变更(例如,在运行时移除
<style>
和<link>
元素)。
Polyfill 限制和警告
如果您使用的是容器查询 polyfill,需要注意以下几项缺失的功能:
- 系统尚不支持 Shadow DOM。
@media
查询条件不支持容器相对单位(例如cqw
和cqh
)。- Safari:15.4 之前的动画关键帧不支持容器相对单位。
- 查询条件尚不支持
calc()
、min()
、max()
或其他数学函数。 - 此 polyfill 仅适用于内嵌和同源 CSS。不支持跨源样式表和 iframe 中的样式表(除非手动加载 polyfill)。
layout
和style
包含需要底层浏览器支持: <ph type="x-smartling-placeholder">- </ph>
- Safari 15.4 及更高版本
- Firefox 目前尚不支持样式包含,但正在开发此功能。
警告
- 为了防止影响 FID 和 CLS,即使第一个布局是同步加载的,polyfill 也无法保证何时会发生第一个布局,不过,它会尝试避免不合理的 LCP 延迟。换言之,首次绘制时绝不能依赖它。
- 生成
ResizeObserver Loop Errors
。原始 polyfill 也可以做到这一点,但值得注意。这是因为在对查询求值后,container-type: inline-size
的块大小可能会发生变化,但ResizeObserver
无法告诉它我们不关心块大小的变化。 - 此 polyfill 根据 Web 平台测试进行了测试,由于某些功能(如 JavaScript API)并未通过 polyfill,因此通过率会有意接近 70%,达到 70% 的通过率。
- 有 2.23% 的用户使用版本低于以下版本的浏览器时,需要采用
:where()
权宜解决方法:- Safari 14
- Chromium 88
- Edge 88
- 三星互联网 15
- Firefox 78