CSS
最近，Chrome团队发布了对一个新的CSS规范的实验性支持，即样式查询。简而言之，它让我们查询容器的样式，而不是只查询尺寸。在查询容器尺寸不够的情况下，这可能很有帮助。

CSS 容器查询

介绍样式查询之前，先来回顾容器查询。
CSS 容器查询（Container Queries）是一项新的 CSS 功能，允许开发人员根据元素的大小来应用样式。这意味着，开发人员可以为不同大小的设备或浏览器窗口应用不同的样式，而无需使用媒体查询或使用 JavaScript 来检测设备大小。
CSS新规范：样式查询 - 图1
来看看一个例子：

  1. .o-grid__item {
  2.   container-type: inline-size;
  3. }
  5. .c-article {
  6.   /* The default style */
  7. }
  9. @container (min-width: 400px) {
  10.   .c-article {
  11.     /* The styles that will make the article horizontal**
  12.  ** instead of a card style.. */
  13.   }
  14. }

首先，需要在定义 container-type。然后，使用 @container开始查询。一旦满足了这个条件，CSS将应用于该容器内的组件。

样式查询

简单地说，样式查询让我们查询一个容器的CSS属性或CSS变量。
样式查询仍然是试验性的，目前只在Chrome Canary中实现。要测试它们，请进入chrome://flags并激活 “Experimental Web Platform features”的切换。
例如，可以检查容器是否有 display: flex，并在此基础上为子元素设计样式。

  1. .page-header {
  2.   display: flex;
  3. }
  5. @container style(display: flex) {
  6.   .page-header__start {
  7.     flex: 1;
  8.     display: flex;
  9.     align-items: center;
  10.     border-right: 1px solid lightgrey;
  11.   }
  12. }

理想情况下，上述做法应该是可行的，但目前Chrome Canary中的样式查询原型仅局限于CSS变量。样式查询预计将在Chrome M111中出现。
现在，可以检查变量--boxed: true是否被添加到容器中，如果是，可以在此基础上改变子元素的样式。
请看下图:
CSS新规范：样式查询 - 图2
请注意，容器查询和样式查询的主要区别在于，前者是针对大小的查询，后者是针对样式的查询。

  1. .card-container {
  2.   --boxed: true;
  3. }
  5. @container style(--boxed: true) {
  6.   .card {
  7.     /* boxed styles */
  8.   }
  9. }

问题

在探讨可以在哪里使用样式查询之前，先来回答大家常见的一个问题：样式查询能解决什么问题？容器查询还不够吗？
这是一个好问题。在容器查询中，可以根据一个组件的父级宽度来控制它的样式，这非常有用。不过，在某些情况下，可能不需要查询尺寸，而是想查询一个容器的计算样式。
为了更好的了解，请看下图：
CSS新规范：样式查询 - 图3
这是一篇来自CMS的文章正文。有一个默认的图片样式和另一个看起来有特色的样式。
下面是对应的代码：

  1. <figure>
  2.   <img src="cheesecake.jpg" alt="" />
  3.   <figcaption>....</figcaption>
  4. </figure>
  1. figcaption {
  2.   font-size: 13px;
  3.   padding: 4px 8px;
  4.   background: lightgrey;
  5. }

当开始对特色的进行造型时，需要覆盖上述内容，并有一个CSS类，可以用它进行造型。

  1. .featured-figure {
  2.   display: flex;
  3.   flex-wrap: wrap;
  4. }
  6. .featured-figure figcaption {
  7.   font-size: 16px;
  8.   padding: 16px;
  9.   border-left: 3px solid;
  10.   margin-left: -6rem;
  11.   align-self: center;
  12. }

当开始为突出显示的元素添加样式时，需要覆盖上述样式并定义一个 CSS 类，以便可以对其进行样式设置。

  1. .featured-figure {
  2.   display: flex;
  3.   flex-wrap: wrap;
  4. }
  6. .featured-figure figcaption {
  7.   font-size: 16px;
  8.   padding: 16px;
  9.   border-left: 3px solid;
  10.   margin-left: -6rem;
  11.   align-self: center;
  12. }

很酷，这个方法行。能不能做得更好？是的！使用样式查询，可以在 figure 中添加 display: flex 或一个 CSS 变量 --featured: true，然后基于这个进行样式设置。

  1. <figure>
  2.   <img src="cheesecake.jpg" alt="" />
  3.   <figcaption>....</figcaption>
  4. </figure>
  1. figure {
  2.   container-name: figure;
  3.   --featured: true;
  4. }
  6. /* Featured figure style. */
  7. @container figure style(--featured: true) {
  8.   img {
  9.     /* Custom styling */
  10.   }
  12.   figcaption {
  13.     /* Custom styling */
  14.   }
  15. }

如果 --featured: true 不存在，将默认使用基本 figure 设计。可以使用 not 关键字来检查 figure 是否没有 display: flex。

  1. /* Default figure style. */
  2. @container figure not style(--featured: true) {
  3.   figcaption {
  4.     /* Custom styling */
  5.   }
  6. }

要知道的几个细节默认情况下，每个元素都是样式容器

所以根本不需要定义一个样式容器。默认情况下，它就在那里。

不能用类名来解决这个问题吗？

是的，可以。使用样式查询的目的是使 CSS 更易读并更容易修改。上述逻辑可以作为一个组件 CSS 写出，而无需将所有这些样式添加到条件类中。
事例：https://codepen.io/shadeed/pen/ZERZxzG/a583817975bae6b78308acb6939a9a54?editors=1100
点击查看【codepen】

减少 CSS 特定性问题

喜欢使用样式查询的原因是，它将减少 CSS 特定性，因为不太依赖 CSS 变化类或 HTML 数据属性来对组件变化进行样式设置。
在下面的 CSS 中，为 section 添加了基本样式。没有什么特别的。

  1. .section {
  2.   background-color: lightgrey;
  3. }
  5. .section__title,
  6. .section__desc {
  7.   color: #222;
  8. }

需要一种方法来为它设置不同的主题，因此使用了变化类。

  1. .section--dark {
  2.   background-color: #222;
  3. }
  5. .section--dark .section__title,
  6. .section--dark .section__desc {
  7.   color: #fff;
  8. }

使用样式查询，可以在 .section 组件周围使用容器，然后在不在 CSS 中创建更多特定性的情况下为标题和描述打标签。

  1. @container style(--theme: dark) {
  2.   .section {
  3.     background-color: #222;
  4.   }
  6.   .section__title,
  7.   .section__desc {
  8.     color: #fff;
  9.   }
  10. }

这看起来干净多了。
接下来，探索几种样式查询可能有帮助的使用情况。

使用情况和示例

基于上下文的样式设置

CSS新规范：样式查询 - 图4
这是一种常见的使用情况，在同一包装器中使用了相同的组件但用法不同。在右侧，有一个文章组件，可能包含一个数字或不包含。
目前，可能会使用一个新的 CSS 类来解决样式设置问题，或者可能在文章组件本身上使用变化类。

  1. .most-popular {
  2.   counter-reset: list;
  3. }
  5. .most-popular article {
  6.   /* custom styling */
  7. }

或者可能在 HTML 中使用 data 属性。

  1. .most-popular[data-counter="true"] {
  2.   counter-reset: list;
  3. }
  5. .most-popular[data-counter="true"] .article {
  6.   /* custom styling */
  7. }

使用 CSS 样式查询，可以在父元素中添加一个 CSS 变量，并根据此对文章进行样式设置。看看这个：

  1. .most-popular {
  2.   --counter: true;
  3. }
  5. @container style(--counter: true) {
  6.   .articles-list {
  7.     counter-reset: list;
  8.   }
  10.   .article {
  11.     display: flex;
  12.     align-items: flex-start;
  13.   }
  15.   .article:before {
  16.     counter-increment: list;
  17.     content: counter(list);
  18.   }
  19. }

甚至不需要在文章组件上使用变化类。也不需要使用 CSS 嵌套。
示例：https://codepen.io/shadeed/pen/LYBYYWP/b53e0baa891dc48b0689e1f926f89b96?editors=1100
点击查看【codepen】

组件级的主题切换

构建的一些组件根据特定条件需要使用不同的主题。在下面的示例中，有一个包含不同统计组件的仪表板。
基于包装器，需要切换组件的主题。
CSS新规范：样式查询 - 图5
目前，可以使用特殊类根据它们的容器为自定义统计组件添加样式。

  1. .special-wrapper .stat {
  2.   background-color: #122c46;
  3. }
  5. .special-wrapper .stat__icon {
  6.   background-color: #2e547a;
  7. }
  9. .special-wrapper .stat__title {
  10.   background-color: #b3cde7;
  11. }

上面的做法一点也没有错，也不坏，但因为嵌套了CSS，所以增加了特殊性。探讨一下如何用样式查询来实现上述内容。
首先，需要在特殊包装器上定义一个切换按钮。然后，可以检查该开关是否处于激活状态，并对状态组件进行相应的设计。

  1. .special-wrapper {
  2.   --theme: dark;
  3.   container-name: stats;
  4. }
  6. @container stats style(--theme: dark) {
  7.   .stat {
  8.     /* Add the dark styles. */
  9.   }
  10. }

CSS新规范：样式查询 - 图6
在这种情况下，样式查询的有用之处在于，将上述样式放在 CSS 中的一个地方是有意义的。

  1. /* stat.css */
  2. .stat {
  3.   /* default styling */
  4. }
  6. @container stats style(--theme: dark) {
  7.   .stat {
  8.     /* custom styling */
  9.   }
  10. }

头像组

在这个例子中，有一组用户的头像。需要根据在父代上设置的一个CSS变量，以不同的方式来布置它们。从Atlassian设计系统中挑选了这个例子。
CSS新规范：样式查询 - 图7

  1. <div class="avatars-wrapper">
  2.   <div class="avatars-list">
  3.     <div class="avatar"></div>
  4.     <!-- more avatars -->
  5.   </div>
  6. </div>

在CSS中，给容器添加了一个名字，并定义了--appearance: default变量。

  1. .avatars-wrapper {
  2.   container-name: avatars;
  3. }
  5. .avatars-list {
  6.   display: flex;
  7.   flex-wrap: wrap;
  8.   gap: 0.25rem;
  9. }

有了这个，就可以使用样式查询来改变基于--appearance变量的布局。

  1. @container avatars style(--appearance: stack) {
  2.   .avatar {
  3.     box-shadow: 0 0 0 2px #fff;
  4.   }
  6.   .avatar + .avatar {
  7.     margin-inline-start: -0.5rem;
  8.   }
  9. }
  11. @container avatars style(--appearance: grid) {
  12.   .avatars-list {
  13.     gap: 0.5rem;
  14.     max-width: 200px;
  15.   }
  16. }

地址：https://codepen.io/shadeed/pen/KKeYLXG/464bd92260d290df58e1387c71d1d30f?editors=1100
点击查看【codepen】

条件装饰样式

在某些情况下，可能需要根据文本元素在 HTML 中的位置为其添加条件装饰样式。
CSS新规范：样式查询 - 图8
标题和段落下方有一个旋转的背景效果。这是通过伪元素实现的：

  1. <div class="content">
  2.   <h2><!-- Title here --></h2>
  3.   <p><!-- Description --></p>
  4. </div>

要对它们进行样式设置，可以使用 CSS 变量并检查它是否已切换，然后相应地添加样式。在示例中，:after 伪元素被添加到 .content 容器的每个子元素。

  1. .content {
  2.   --decorated: true;
  3. }
  5. @container style(--decorated: true) {
  6.   :after {
  7.     content: "";
  8.     position: absolute;
  9.     inset: 0;
  10.     background-color: var(--dec-color, green);
  11.     opacity: 0.1;
  12.     z-index: -1;
  13.     transform: rotate(-1.5deg);
  14.   }
  15. }

CSS新规范：样式查询 - 图9
地址：https://codepen.io/shadeed/pen/abKxgyW/a0e0639a118fac1b781a5de18c598789
点击查看【codepen】

RTL 样式：卡片组件

写 RTL 样式时，第一步是在<html>元素中添加 dir=rtl。一旦添加，每个元素的 direction CSS 属性都会变为 direction: rtl。
随着逻辑属性的兴起，不需要完全重写 CSS。考虑以下示例：

  1. .item {
  2.   margin-inline-start: 1rem;
  3. }

对于从左到右的布局，上述内容将计算为 margin-left。对于从右到左的布局，它将是 margin-right。很酷，对吧？但是仍然没有检查渐变方向的逻辑 CSS。
样式查询可以用于解决这个问题。考虑以下示例：
CSS新规范：样式查询 - 图10
有一个组件，由两个元素组成，这两个元素都应根据文档改变方向：

  • 渐变：对于 LTR 布局，它从左到右。
  • 箭头方向：指向右边。

上述内容无法使用逻辑 CSS 控制。目前，这样做：

  1. html[dir="rtl"] .card {
  2.   background: linear-gradient(to left, ...);
  3. }
  5. html[dir="rtl"] .card__cta {
  6.   transform: scaleX(-1);
  7. }

使用样式查询，可以查询容器并检查direction是否等于 rtl，并根据此对样式进行更改。

  1. .card {
  2.   --bg-angle: to right;
  3.   background: linear-gradient(var(--bg-angle), #5521c3, #5893eb);
  4. }
  6. @container card style(direction: rtl) {
  7.   .card {
  8.     --bg-angle: to left;
  9.   }
  11.   .card__cta {
  12.     transform: scaleX(-1);
  13.   }
  14. }

请注意，样式查询的当前原型不支持 style() 查询中的 CSS 属性。因此，在示例中使用了 CSS 变量。

新闻模块

这是在 bbc.com 上发现的真实问题。最初，有以下新闻组件。
CSS新规范：样式查询 - 图11
根据其容器，样式应略有改变。考虑以下图：
CSS新规范：样式查询 - 图12
注意组件现在有两个修改：

  • 白色背景。
  • 标题和描述容器四周填充。

这是 BBC.com 上 CSS 的样式：

  1. .media--padded {
  2.   background: #fff;
  3. }
  5. .media--padded .media__content {
  6.   padding: 0.75rem 0.75rem 3rem 0.75rem;
  7. }

如何通过样式查询来解决这个问题呢？很简单，需要一种方法来告诉组件，如果住在这个容器内，卡片的样式应该被填充。

  1. .special-container {
  2.   --card--padded: true;
  3. }
  5. @container style (--card-padded: true) {
  6.   .media {
  7.     background: #fff;
  8.   }
  10.   .media__content {
  11.     padding: 0.75rem 0.75rem 3rem 0.75rem;
  12.   }
  13. }

原文：https://ishadeed.com/article/css-container-style-queries/