CSS `Style Container Queries` (提案)：基于容器样式值的条件样式

各位观众老爷们，大家好！今天咱们聊点刺激的，聊聊CSS世界里即将（或者说已经开始）掀起波澜的"Style Container Queries"，也就是基于容器样式值的条件样式。

第一部分：Container Queries的前世今生

话说CSS一直有个痛点，那就是响应式设计的粒度不够细。传统的Media Queries是基于视口大小来判断，这没毛病，但有时候我们想针对某个容器的尺寸、样式来应用不同的样式，Media Queries就捉襟见肘了。

举个栗子：

<div class="card-container">
  <div class="card">
    <h1>标题</h1>
    <p>内容内容内容内容内容内容内容内容内容内容</p>
  </div>
</div>

如果 .card-container 在大屏幕上宽度足够，我们想让 .card 里的文字多显示几行；如果 .card-container 在小屏幕上宽度不够，我们希望文字少显示几行，甚至直接截断。用 Media Queries 咋整？只能根据视口大小来猜测 .card-container 的宽度，这明显不靠谱啊！

于是，Container Queries就应运而生了。它允许我们根据容器的尺寸、类型来应用样式，而不是仅仅依赖视口大小。这就像给CSS开了个外挂，让响应式设计更上一层楼。

第二部分：Container Queries家族成员介绍

Container Queries 主要分为两种：

Size Container Queries（尺寸容器查询）: 根据容器的尺寸（宽度、高度等）来应用样式。
Style Container Queries（样式容器查询）: 根据容器的样式值（例如某个自定义属性的值）来应用样式。

今天咱们的重点是 Style Container Queries，也就是基于容器样式值的条件样式。Size Container Queries 咱们简单提一下，以后有机会再详细展开。

第三部分：Style Container Queries语法详解

Style Container Queries 的核心在于 @container style() 这个 at-rule。它的语法结构是这样的：

@container style( <declaration-query> ) {
  /* 在容器满足条件时应用的样式 */
}

其中，<declaration-query> 是一个声明查询，用来判断容器的样式是否满足条件。它可以是一个简单的属性值比较，也可以是更复杂的表达式。

3.1 声明容器

在使用 Style Container Queries 之前，我们需要先将某个元素声明为容器。这可以通过 container-type 属性来实现。

.card-container {
  container-type: inline-size; /* 声明为尺寸容器，可以根据容器宽度进行查询 */
  container-name: card-container; /* 给容器起个名字，方便后续引用 */
  --theme-color: blue; /* 定义一个自定义属性 */
}

container-type 可以取以下值：

size: 根据容器的尺寸（宽度、高度）进行查询。
inline-size: 根据容器的行内尺寸（宽度）进行查询。
normal: 不声明为容器。
contain: 同时声明为尺寸容器和样式容器，但需要指定 container-name。

container-name 可以给容器起一个名字，方便我们在 @container 中引用它。

3.2 简单属性值比较

最简单的声明查询就是直接比较容器的某个属性值。例如：

.card-container {
  container-type: inline-size;
  container-name: card-container;
  --theme-color: blue;
}

@container card-container style(--theme-color: blue) {
  .card {
    background-color: lightblue;
  }
}

这段代码的意思是：如果 .card-container 的 --theme-color 属性值为 blue，那么 .card 的背景色就设置为 lightblue。

3.3 使用 not() 取反

我们可以使用 not() 函数来取反，例如：

@container card-container style(not(--theme-color: blue)) {
  .card {
    background-color: lightcoral;
  }
}

这段代码的意思是：如果 .card-container 的 --theme-color 属性值不是 blue，那么 .card 的背景色就设置为 lightcoral。

3.4 使用 and 连接多个条件

我们可以使用 and 关键字来连接多个条件，例如：

@container card-container style(--theme-color: blue) and style(--border-radius: 5px) {
  .card {
    border: 1px solid black;
  }
}

这段代码的意思是：如果 .card-container 的 --theme-color 属性值为 blue 且 --border-radius 属性值为 5px，那么 .card 就添加一个黑色的边框。

3.5 使用 or 连接多个条件

我们可以使用 or 关键字来连接多个条件，例如：

@container card-container style(--theme-color: blue) or style(--theme-color: red) {
  .card {
    color: white;
  }
}

这段代码的意思是：如果 .card-container 的 --theme-color 属性值为 blue 或者 red，那么 .card 的文字颜色就设置为白色。

3.6 使用范围查询

我们可以使用范围查询来判断属性值是否在一个范围内，例如：

.card-container {
    container-type: inline-size;
    container-name: card-container;
    --font-size: 16px;
}

@container card-container style(--font-size >= 16px) and style(--font-size <= 20px) {
    .card {
        font-weight: bold;
    }
}

这段代码的意思是：如果 .card-container 的 --font-size 属性值在 16px 到 20px 之间（包含 16px 和 20px），那么 .card 的字体加粗。

3.7 使用 supports() 查询

我们可以使用 supports() 函数来判断容器是否支持某个 CSS 特性，例如：

@container card-container style(supports(display: grid)) {
  .card {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
}

这段代码的意思是：如果 .card-container 支持 display: grid，那么 .card 就使用 Grid 布局。

第四部分：实战演练

咱们来做一个稍微复杂点的栗子，模拟一个主题切换的功能。

<div class="theme-switcher">
  <button data-theme="light">Light</button>
  <button data-theme="dark">Dark</button>
  <button data-theme="colorful">Colorful</button>
</div>

<div class="card-container">
  <div class="card">
    <h1>标题</h1>
    <p>内容内容内容内容内容内容内容内容内容内容</p>
  </div>
</div>

<script>
  const themeSwitcher = document.querySelector('.theme-switcher');
  const cardContainer = document.querySelector('.card-container');

  themeSwitcher.addEventListener('click', (event) => {
    const theme = event.target.dataset.theme;
    cardContainer.style.setProperty('--theme', theme);
  });
</script>

.card-container {
  container-type: inline-size;
  container-name: card-container;
  --theme: light; /* 默认主题 */
  padding: 20px;
  border: 1px solid #ccc;
}

.card {
  padding: 20px;
}

/* Light Theme */
@container card-container style(--theme: light) {
  .card {
    background-color: #fff;
    color: #333;
  }
}

/* Dark Theme */
@container card-container style(--theme: dark) {
  .card {
    background-color: #333;
    color: #fff;
  }
}

/* Colorful Theme */
@container card-container style(--theme: colorful) {
  .card {
    background-color: linear-gradient(to right, #f00, #0f0, #00f);
    color: #fff;
  }
}

在这个栗子中，我们通过 JavaScript 来动态修改 .card-container 的 --theme 属性值，然后使用 Style Container Queries 来根据不同的主题应用不同的样式。

第五部分：兼容性问题

目前，Style Container Queries 的兼容性还不是很好。需要使用一些polyfill 或者等待浏览器正式支持. 建议使用 caniuse.com 查询最新的兼容性信息。

第六部分：总结与展望

Style Container Queries 是一项非常有潜力的 CSS 新特性，它让我们的响应式设计更加灵活和强大。虽然目前兼容性还不是很好，但相信随着浏览器的不断更新，它会越来越普及。

总的来说，Style Container Queries 解决了传统 CSS 响应式设计的一些痛点，让我们可以更加精细地控制样式，提高开发效率。掌握它，你就能在未来的 CSS 世界里更加游刃有余。

第七部分：答疑环节

各位观众老爷们，以上就是今天关于 Style Container Queries 的分享。现在是答疑环节，大家有什么问题可以提出来，我会尽力解答。咱们一起学习，一起进步，共同迎接 CSS 的美好未来！

附录：一些有用的表格

特性	描述
`container-type`	用于声明一个元素为容器，并指定容器的类型。可以取值 `size`, `inline-size`, `normal`, `contain`。
`container-name`	用于给容器起一个名字，方便在 `@container` 中引用。
`@container`	CSS at-rule，用于定义 Container Queries 的规则。
`style()`	用于在 `@container` 中进行声明查询，判断容器的样式是否满足条件。
`not()`	用于在 `style()` 中取反。
`and`	用于在 `style()` 中连接多个条件。
`or`	用于在 `style()` 中连接多个条件。
`supports()`	用于在 `style()` 中判断容器是否支持某个 CSS 特性。
`>=`	大于等于
`<=`	小于等于

浏览器	支持程度
Chrome	较高
Firefox	一般
Safari	一般
Edge	较高
Opera	较高
IE	不支持

(注：以上兼容性信息可能会随浏览器版本更新而变化，请以实际情况为准)

发表回复 取消回复

发表回复取消回复