CSS新规范之样式查询

1. CSS 容器查询
2. CSS 样式查询
3. 问题
4. 要知道的几个细节默认情况下，每个元素都是样式容器
5. 我们不能用类名来解决这个问题吗？
6. 减少 CSS 特定性问题
7. 使用情况和示例
• 基于上下文的样式设置
• 组件级的主题切换
• 头像组
• 条件装饰样式
• RTL 样式：卡片组件
• 新闻模块
8. 结语

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

CSS 容器查询

介绍样式查询之前，我们先来回顾容器查询。

CSS 容器查询（Container Queries）是一项新的 CSS 功能，允许开发人员根据元素的大小来应用样式。这意味着，开发人员可以为不同大小的设备或浏览器窗口应用不同的样式，而无需使用媒体查询或使用 JavaScript 来检测设备大小。

figcaption {
  font-size: 13px;
  padding: 4px 8px;
  background: lightgrey;
}

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

.featured-figure {
  display: flex;
  flex-wrap: wrap;
}

.featured-figure figcaption {
  font-size: 16px;
  padding: 16px;
  border-left: 3px solid;
  margin-left: -6rem;
  align-self: center;
}

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

.featured-figure {
  display: flex;
  flex-wrap: wrap;
}

.featured-figure figcaption {
  font-size: 16px;
  padding: 16px;
  border-left: 3px solid;
  margin-left: -6rem;
  align-self: center;
}

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

<figure>
  <img src="cheesecake.jpg" alt="" />
  <figcaption>....</figcaption>
</figure>

figure {
  container-name: figure;
  --featured: true;
}

/* Featured figure style. */
@container figure style(--featured: true) {
  img {
    /* Custom styling */
  }

  figcaption {
    /* Custom styling */
  }
}

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

/* Default figure style. */
@container figure not style(--featured: true) {
  figcaption {
    /* Custom styling */
  }
}

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

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

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

是的，我们可以。使用样式查询的目的是使 CSS 更易读并更容易修改。上述逻辑可以作为一个组件 CSS 写出，而无需将所有这些样式添加到条件类中。

例子：点击这里

减少 CSS 特定性问题

我喜欢使用样式查询的原因是，它将减少 CSS 特定性，因为我们将不太依赖 CSS 变化类或 HTML 数据属性来对组件变化进行样式设置。

在下面的 CSS 中，我们为 section 添加了基本样式。没有什么特别的。

.section {
  background-color: lightgrey;
}

.section__title,
.section__desc {
  color: #222;
}

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

.section--dark {
  background-color: #222;
}

.section--dark .section__title,
.section--dark .section__desc {
  color: #fff;
}

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

@container style(--theme: dark) {
  .section {
    background-color: #222;
  }

  .section__title,
  .section__desc {
    color: #fff;
  }
}

这看起来干净多了。

接下来，我们探索几种样式查询可能有帮助的使用情况。

使用情况和示例

基于上下文的样式设置

注意组件现在有两个修改：

• 白色背景。
• 标题和描述容器四周填充。
• 这是 CSS 的样式：

  .media--padded {
    background: #fff;
  }
  
  .media--padded .media__content {
    padding: 0.75rem 0.75rem 3rem 0.75rem;
  }

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

.special-container {
  --card--padded: true;
}

@container style (--card-padded: true) {
  .media {
    background: #fff;
  }

  .media__content {
    padding: 0.75rem 0.75rem 3rem 0.75rem;
  }
}

结语

CSS 样式查询是 CSS 的强大补充。如果让大家使用，你会用它来做什么呢？