CSS 容器查询入门

html

• ...

• ...

• ...

...

我们使用两个 CSS 属性创建容器：container-name 和 container-type。container-name 是可选的，但如果有多个容器在页面上，它会很有用，因为它让我们清楚地知道我们在引用哪个容器。容器名称可以是任何我们想要的。我们将这个命名为“article”。

对于基于大小的容器查询，container-type 应为 inline-size。inline-size 是一个逻辑值，因此在水平书写模式（默认）下，它指的是宽度，而在垂直书写模式下，它指的是高度。size 是另一个可能的值，但它指的是CSS containment 模块，正如 Stephanie Eckles 在她的 Smashing Magazine 文章中所解释的那样，它与我们这里无关。

css.article-container {

container-name: article;

container-type: inline-size;

}

在撰写本文时，无法查询块尺寸。

简写

简写属性 container 允许我们同时设置容器名称和容器类型（此属性需要容器名称）。

css.article-container {

container: article / inline-size;

}

查询容器

定义了容器后，编写容器查询与编写媒体查询类似。编写查询时，我们可以选择指定一个命名容器，也可以省略它，在这种情况下，查询将默认使用最近的容器。如果我们没有定义容器，那么我们的容器查询将非常像媒体查询——也就是说，它将查询视口大小。

指定一个命名容器可能很有帮助，这样我们可以确切知道正在查询哪个容器。这对于我们可能有多个嵌套容器的布局尤其有用。

css/* Without a named container */

@container (width > 700px) {

/* Styles applied to elements within any container when the container is over 700px wide */

}

/* Specifying a named container */

@container article (width > 700px) {

/* Styles applied to elements within the 'article' container when the container is over 700px wide */

}

与媒体查询一样，我们可以使用任意数量的容器查询。

*,

*::before,

*::after {

box-sizing: border-box;

}

body {

margin: 0;

min-height: 100vh;

padding: 1rem;

background: lavender;

font-family: Montserrat, sans-serif;

line-height: 1.3;

}

img {

display: block;

width: 100%;

aspect-ratio: 3 / 2;

object-fit: cover;

}

.article-container {

min-width: min(100%, 400px);

max-width: 1200px;

overflow: hidden;

resize: both;

border: 1px solid;

padding: 1rem;

background: #c4c4e1;

}

article {

padding: 1rem;

background: white;

}

article * {

margin: 0;

}

h3 {

font-size: 1.3em;

margin-bottom: 0.2em;

line-height: 1.24;

}

css.article-container {

container: article / inline-size;

}

article {

display: grid;

gap: 1rem;

}

@container article (inline-size > 500px) {

/* Styles for horizontal article */

article {

grid-template-columns: 1fr 2fr;

}

}

@container article (inline-size > 800px) {

article {

/* Styles for article in a large space (e.g. featured article) */

grid-template-columns: 1fr 1fr;

gap: 2rem;

font-size: 1.2rem;

}

h3 {

font-size: 2rem;

}

}

新的媒体查询语法

您可能会注意到我们编写这些容器查询的方式与传统媒体查询略有不同。我们使用的是媒体查询范围语法，而不是 min-width 和 max-width。这使得我们的查询更简洁。

css/* Old syntax for styles between 700px and 900px */

@container (min-width: 700px) and (max-width: 900px) {

}

/* New syntax */

@container (700px <= width <= 900px) {

}

它也更利于使用逻辑属性。与其编写依赖于最小或最大宽度的样式，不如说“如果内联尺寸**大于**（或**小于**）x，则应用这些样式”。

我们之前的容器查询示例可以重写为使用 inline-size 而不是 min-width。

css@container article (inline-size > 700px) {

article {

/* Styles for horizontal article */

}

}

嵌套容器

除了响应式文章组件外，我们自己的网格布局也需要响应可用空间。

这意味着我们需要在网格周围创建额外的容器。我们需要调整标记以包含这个额外的包装元素。

html

css.grid-container {

container: layout / inline-size;

}

我们将编写容器查询，在空间足够时分别为我们的网格指定两列布局和四列布局。

*,

*::before,

*::after {

box-sizing: border-box;

}

body {

margin: 0;

min-height: 100vh;

padding: 0 1rem;

background: lavender;

font-family: Montserrat, sans-serif;

line-height: 1.3;

}

img {

display: block;

width: 100%;

aspect-ratio: 3 / 2;

object-fit: cover;

}

article * {

margin: 0;

}

h3 {

font-size: 1.3em;

margin-bottom: 0.2em;

line-height: 1.24;

}

ul {

list-style: none;

margin: 0;

padding: 0;

}

.grid-container {

padding: 1rem;

margin: 0 auto;

max-width: 1400px;

background: #b3b3d7;

}

.article-container {

container: article / inline-size;

}

article {

display: grid;

gap: 1rem;

padding: 1rem;

background: white;

}

@container article (inline-size > 500px) {

article {

grid-template-columns: 1fr 2fr;

}

}

@container article (inline-size > 800px) {

article {

grid-template-columns: 1fr 1fr;

gap: 2rem;

font-size: 1.2rem;

}

h3 {

font-size: 2rem;

}

}

css/* Initial styles for single column layout */

.grid {

display: grid;

gap: 1rem;

}

@container layout (inline-size > 800px) {

.grid {

grid-template-columns: repeat(2, 1fr);

}

/* The featured article should span two columns */

.article-container:first-child {

grid-column: span 2;

}

}

@container layout (inline-size > 1000px) {

.grid {

grid-template-columns: repeat(4, 1fr);

}

.article-container:first-child {

grid-column: span 4;

}

.article-container:nth-child(2),

.article-container:nth-child(3) {

grid-column: span 2;

}

}

如果我们调整组件的大小，我们可以看到我们的网格布局和嵌套的文章都响应可用空间。

容器单位

您可能已经熟悉视口单位，它们可用于相对于视口调整元素大小。而容器单位则使我们能够相对于容器调整元素大小。

容器单位对于设置我们的文章组件样式非常有用。我们可以使用它们来指定内边距和字体大小，从而减少为不同断点调整这些设置的需要。

cqi 单位用于指定容器内联尺寸的百分比。

cssarticle {

padding: 4cqi;

}

（我们不需要在容器查询中编写这些样式。只要定义了容器，它们就会响应容器。）

为了防止内边距变得过大或过小，我们可以使用 clamp() 函数。它解析为中间值，因此通过传递两个固定值以及我们的灵活 cqi 值，我们可以确保内边距永远不会小于 1rem 或大于 3rem。

cssarticle {

padding: clamp(1rem, 4cqi, 2rem);

}

同样，我们可以使用 clamp 函数和容器单位来设置字体大小。

*,

*::before,

*::after {

box-sizing: border-box;

}

body {

margin: 0;

min-height: 100vh;

padding: 0 1rem;

background: lavender;

font-family: Montserrat, sans-serif;

line-height: 1.3;

}

img {

display: block;

width: 100%;

aspect-ratio: 3 / 2;

object-fit: cover;

}

article * {

margin: 0;

}

h3 {

font-size: 1.3em;

margin-bottom: 0.2em;

line-height: 1.24;

}

ul {

list-style: none;

margin: 0;

padding: 0;

}

.grid-container {

padding: 1rem;

margin: 0 auto;

max-width: 1400px;

background: #b3b3d7;

}

.grid-container {

container: layout / inline-size;

}

.grid {

display: grid;

gap: 1rem;

}

@container layout (inline-size > 800px) {

.grid {

grid-template-columns: repeat(2, 1fr);

}

/* The featured article should span two columns */

.article-container:first-child {

grid-column: span 2;

}

}

@container layout (inline-size > 1000px) {

.grid {

grid-template-columns: repeat(4, 1fr);

}

.article-container:first-child {

grid-column: span 4;

}

.article-container:nth-child(2),

.article-container:nth-child(3) {

grid-column: span 2;

}

}

.article-container {

container: article / inline-size;

}

article {

display: grid;

gap: 1rem;

padding: 1rem;

background: white;

padding: clamp(1rem, 4cqi, 2rem);

font-size: clamp(1rem, 3cqi, 1.6rem);

}

h3 {

font-size: clamp(1.4rem, 4cqi, 2.5rem);

}

@container article (inline-size > 500px) {

article {

grid-template-columns: 1fr 2fr;

}

}

@container article (inline-size > 800px) {

article {

grid-template-columns: 1fr 1fr;

gap: 1.5em;

}

}

浏览器支持与回退

截至 2023 年，所有主要浏览器都支持容器查询。然而，我们应该意识到并非所有用户都拥有最新的浏览器。如果您需要支持旧版浏览器的用户，有一个易于使用的 Chrome 团队的 polyfill。

样式查询

到目前为止，我们已经介绍了如何使用容器查询来查询元素的内联尺寸来构建布局。但容器查询的应用远不止于此。我们还可以查询带有自定义属性的元素的样式。

在我们的示例布局中，我们可能希望通过不同的样式来吸引“特色”文章的注意力。在我们的标记中设置自定义属性，然后我们可以为具有特定自定义属性值的元素应用样式。

html

css@container style(--featured: true) {

article {

border-radius: 0.2rem;

background: pink;

border: 1px solid deeppink;

padding: clamp(1rem, 5cqi, 3rem);

}

}

我们不需要定义容器，因为每个元素都自动具有样式容器。在 Una Kravets 的文章中可以了解更多关于样式容器查询的信息。

局限性和浏览器支持

在撰写本文时，Chrome 和 Edge 支持容器样式查询。Safari 或 Firefox 目前不支持。在CSS Containment Module Level 3 规范中，为查询任何属性-值对（不仅仅是自定义属性）提供了支持。但目前还没有浏览器支持这一点。

我们还需要媒体查询吗？

如果我们能够使用容器查询来查询视口大小和元素大小，我们是否还需要媒体查询？当然需要！媒体查询用于查询的不仅仅是大小。我们可以检测用户的偏好，例如 prefers-reduced-motion 和 prefers-color-scheme，仅举两例。

仍然可能出现需要根据视口大小为嵌套容器内的元素设置样式的情况，而媒体查询可能是最简单的方法。但我预测，在不久的将来，容器查询将在布局方面在很大程度上取代媒体查询，而媒体查询将主要保留用于上述等其他媒体特性。

总结

容器查询为我们提供了对响应式布局的更多控制，同时也帮助我们编写更简洁、更健壮、更易于维护的 CSS。既然它们已经获得了广泛的浏览器支持，现在是尝试它们的好时机。最棒的是，您不必立即全部投入：如果有一个组件您在使用媒体查询时难以构建，那么值得看看容器查询，因为它们可能是您正在寻找的答案。

*,

*::before,

*::after {

box-sizing: border-box;

}

body {

margin: 0;

min-height: 100vh;

background: whitesmoke;

font-family: Montserrat, sans-serif;

line-height: 1.3;

}

img {

display: block;

width: 100%;

aspect-ratio: 3 / 2;

object-fit: cover;

}

ul {

list-style: none;

padding: 0;

margin: 0;

}

h2 {

padding-bottom: 0.2em;

margin: 0 0 0.6em;

border-bottom: 2px solid;

}

article * {

margin: 0;

}

aside {

background: #f5f8ff;

padding: var(--gap);

}

.wrapper {

max-width: 1650px;

margin: 0 auto;

padding: clamp(1rem, 10cqi, 3rem);

background: white;

}

h3 {

font-size: 1.3em;

margin-bottom: 0.2em;

line-height: 1.24;

}

.wrapper-container {

container: wrapper / inline-size;

}

.wrapper {

--gap: clamp(1rem, 5cqi, 2rem);

display: grid;

gap: var(--gap);

}

@container wrapper (min-width: 1250px) {

.wrapper {

grid-template-columns: 4fr 1fr;

}

}

.grid-container {

container: layout / inline-size;

}

.grid {

display: grid;

gap: var(--gap);

margin-top: var(--gap);

}

@container layout (inline-size > 800px) {

.grid {

grid-template-columns: repeat(2, 1fr);

}

.article-container:first-child {

grid-column: span 2;

}

}

@container layout (inline-size > 1000px) {

.grid {

grid-template-columns: repeat(4, 1fr);

}

.article-container:first-child {

grid-column: span 4;

}

.article-container:nth-child(2),

.article-container:nth-child(3) {

grid-column: span 2;

}

}

.article-container {

container: article / inline-size;

}

article {

display: grid;

gap: calc(var(--gap) * 0.6);

font-size: clamp(0.9rem, 3cqi, 1.75rem);

}

@container style(--featured: true) {

article {

position: relative;

overflow: hidden;

border-radius: 0.2rem;

background: #e1e7f5;

padding: calc(var(--gap) * 0.8);

}

article::before {

content: "";

width: 2.75rem;

aspect-ratio: 1;

position: absolute;

top: -0.35rem;

left: -0.35rem;

border-radius: 50%;

background-color: #7e9bde;

background-position: center;

background-size: 70%;

background-repeat: no-repeat;

background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' %3F%3E%3Csvg baseProfile='tiny' height='24px' id='Layer_1' version='1.2' viewBox='0 0 24 24' width='24px' xml:space='preserve' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cg%3E%3Cg%3E%3Cpath d='M9.362,9.158c0,0-3.16,0.35-5.268,0.584c-0.19,0.023-0.358,0.15-0.421,0.343s0,0.394,0.14,0.521 c1.566,1.429,3.919,3.569,3.919,3.569c-0.002,0-0.646,3.113-1.074,5.19c-0.036,0.188,0.032,0.387,0.196,0.506 c0.163,0.119,0.373,0.121,0.538,0.028c1.844-1.048,4.606-2.624,4.606-2.624s2.763,1.576,4.604,2.625 c0.168,0.092,0.378,0.09,0.541-0.029c0.164-0.119,0.232-0.318,0.195-0.505c-0.428-2.078-1.071-5.191-1.071-5.191 s2.353-2.14,3.919-3.566c0.14-0.131,0.202-0.332,0.14-0.524s-0.23-0.319-0.42-0.341c-2.108-0.236-5.269-0.586-5.269-0.586 s-1.31-2.898-2.183-4.83c-0.082-0.173-0.254-0.294-0.456-0.294s-0.375,0.122-0.453,0.294C10.671,6.26,9.362,9.158,9.362,9.158z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");

}

}

@container article (inline-size > 500px) {

article {

grid-template-columns: 1fr 2fr;

}

}

@container article (inline-size > 800px) {

article {

grid-template-columns: 1fr 1fr;

gap: var(--gap);

}

}

在此处查看结合本文所有示例的完整演示

其他资源

CSS Containment Module Level 3

视频：CSS Containers，它们了解什么？ by Miriam Suzanne at CSS Day

入门样式查询 by Una Kravets

新的 CSS 媒体查询范围语法 by Preethi Selvam