精通 CSS @when 规则：动态网页设计的条件样式应用

CSS 的 @when 规则是 CSS Conditional Rules Module Level 5 规范的一部分，它提供了一种强大的方法，可以根据特定条件来应用样式。它超越了传统的媒体查询，允许基于容器大小、自定义属性甚至元素状态进行更精細的样式控制。这可以显著增强您网页设计的响应能力和适应性，从而在不同设备和上下文中带来更好的用户体验。

理解 @when 规则的基础知识

@when 规则的核心是提供一种机制，仅在满足特定条件时才执行一个 CSS 样式块。这类似于编程语言中的 if 语句。让我们来分解一下语法：

@when condition {
  /* 当条件为真时应用的 CSS 规则 */
}

condition 可以基于多种因素，包括：

• 容器查询 (Container Queries): 根据其包含元素的大小而非视口来设置元素样式。
• 自定义状态 (Custom States): 响应用户交互或应用程序状态。
• CSS 变量 (CSS Variables): 根据 CSS 自定义属性的值应用样式。
• 范围查询 (Range Queries): 检查一个值是否落在特定范围内。

@when 的强大之处在于它能够创建真正基于组件的样式。您可以将样式逻辑封装在组件内，并确保它仅在组件满足某些条件时才应用，而无论周围的页面布局如何。

使用 @when 进行容器查询

容器查询是响应式设计的游戏规则改变者。它们允许元素根据其父容器的尺寸（而不仅仅是视口宽度）来调整样式。这使得组件更加灵活和可重用。想象一个卡片组件，它在窄侧边栏和宽主内容区域中的显示方式不同。@when 规则使这变得异常简单。

基本容器查询示例

首先，您需要声明一个容器。您可以使用 container-type 属性来做到这一点：

.container {
  container-type: inline-size;
}

inline-size 允许根据容器的内联尺寸（在水平书写模式下是宽度，在垂直书写模式下是高度）进行查询。您也可以使用 size 来查询两个维度，或使用 normal 来不创建查询容器。

现在，您可以使用 @container（通常与 @when 结合使用）来根据容器的大小应用样式：

@container (min-width: 300px) {
  .card {
    flex-direction: row;
    align-items: center;
  }
  .card__image {
    width: 100px;
    height: 100px;
  }
}

@container (max-width: 299px) {
  .card {
    flex-direction: column;
    align-items: flex-start;
  }
  .card__image {
    width: 100%;
    height: auto;
  }
}

在此示例中，.card 的布局根据容器的宽度而变化。当容器宽度至少为 300px 时，卡片将图像和文本并排显示。当它更窄时，它们会垂直堆叠。

以下是我们如何使用 @when 来实现相同的结果，可能会根据浏览器支持和编码偏好与 @container 结合使用（因为 @when 在某些场景中提供了超越容器大小的更大灵活性）：

@container card-container (min-width: 300px) {
  @when container(card-container) {
    .card {
      flex-direction: row;
      align-items: center;
    }
    .card__image {
      width: 100px;
      height: 100px;
    }
  }
}

@container card-container (max-width: 299px) {
  @when container(card-container) {
    .card {
      flex-direction: column;
      align-items: flex-start;
    }
    .card__image {
      width: 100%;
      height: auto;
    }
  }
}

在这种情况下，`card-container` 是用 `@container` 分配的容器名称，而 `@when` 中的 `container(card-container)` 检查指定的容器上下文是否处于活动状态。注意：对 `container()` 函数的支持和精确语法可能因浏览器和版本而异。在实施前请查阅浏览器兼容性表格。

实用的国际化示例

• 电子商务产品列表：根据分类页面网格中的可用空间以不同方式显示产品列表。较小的容器可能只显示产品图片和价格，而较大的容器可以包括简短描述和评级。这对于不同地区具有不同网速和设备类型的用户非常有用，可以在高端台式机和发展中国家的低带宽移动连接上提供优化的体验。
• 新闻文章摘要：根据容器的宽度调整新闻网站主页上显示的文章摘要长度。在狭窄的侧边栏中，只显示标题和几个词；在主内容区域，提供更详细的摘要。考虑语言差异，某些语言（例如德语）的单词和短语往往更长，会影响摘要所需的空间。
• 仪表盘小部件：根据其容器大小修改仪表盘小部件的布局。一个小部件可能显示一个简单的图表，而一个较大的小部件可以包括详细的统计数据和控件。根据用户的特定设备和屏幕尺寸定制仪表盘体验，同时考虑数据可视化的文化偏好。例如，某些文化可能更喜欢条形图而不是饼图。

将 @when 与自定义状态结合使用

自定义状态允许您为元素定义自己的状态，并根据这些状态触发样式更改。这在复杂的 Web 应用程序中特别有用，因为传统的 CSS 伪类如 :hover 和 :active 是不够的。虽然自定义状态在浏览器实现中仍在发展，但当支持成熟时，@when 规则为基于这些状态控制样式提供了一个有前景的途径。

概念性示例（使用 CSS 变量模拟状态）

由于原生自定义状态支持尚未普及，我们可以使用 CSS 变量和 JavaScript 来模拟它。

/* CSS */
.my-element {
  --is-active: 0;
  background-color: #eee;
}

@when var(--is-active) = 1 {
  .my-element {
    background-color: #aaf;
  }
}

/* JavaScript */
const element = document.querySelector('.my-element');
element.addEventListener('click', () => {
  element.style.setProperty('--is-active', element.style.getPropertyValue('--is-active') === '0' ? '1' : '0');
});

在这个例子中，我们使用一个 CSS 变量 --is-active 来跟踪元素的状态。当元素被点击时，JavaScript 代码会切换这个变量的值。然后，当 --is-active 等于 1 时，@when 规则会应用不同的背景颜色。虽然这是一种变通方法，但它展示了基于状态进行条件样式的概念。

未来使用真正自定义状态的潜在用例

当真正的自定义状态实现时，语法可能看起来像这样（注意：这是推测性的，基于提案）：

.my-element {
  /* 初始样式 */
}

@when :state(my-custom-state) {
  .my-element {
    /* 当自定义状态激活时的样式 */
  }
}

然后，您将使用 JavaScript 来设置和取消自定义状态：

element.states.add('my-custom-state'); // 激活状态
element.states.remove('my-custom-state'); // 停用状态

这将允许基于应用程序逻辑对样式进行极其精细的控制。

国际化和本地化注意事项

• 从右到左 (RTL) 的语言：自定义状态可用于为阿拉伯语和希伯来语等 RTL 语言调整组件的布局和样式。例如，在特定的 RTL 状态激活时，镜像导航菜单的布局。
• 可访问性：使用自定义状态提供增强的可访问性功能，例如在触发用户交互状态时高亮显示焦点元素或提供替代文本描述。确保这些状态变化能有效地传达给辅助技术。
• 文化设计偏好：根据文化设计偏好调整组件的视觉外观。例如，根据用户的区域设置或语言使用不同的配色方案或图标集。

使用 CSS 变量和范围查询

@when 规则也可以与 CSS 变量一起使用，以创建动态和可定制的样式。您可以根据 CSS 变量的值应用样式，允许用户在不编写任何代码的情况下自定义您网站的外观。

示例：主题切换

:root {
  --theme-color: #fff;
  --text-color: #000;
}

body {
  background-color: var(--theme-color);
  color: var(--text-color);
}

@when var(--theme-color) = #000 {
  body {
    --text-color: #fff;
  }
}

在这个例子中，--theme-color 变量控制 body 的背景颜色。当它被设置为 #000 时，@when 规则将 --text-color 更改为 #fff，从而创建一个暗色主题。然后，用户可以使用 JavaScript 或在用户样式表中设置不同的 CSS 变量来更改 --theme-color 的值。

范围查询

范围查询允许您检查一个值是否落在特定范围内。这对于创建更复杂的条件样式很有用。

@when (400px <= width <= 800px) {
  .element {
    /* 当宽度在 400px 和 800px 之间时应用的样式 */
  }
}

然而，@when 中范围查询的确切语法和支持情况可能会有所不同。建议查阅最新的规范和浏览器兼容性表格。对于基于尺寸的条件，容器查询通常提供了一个更健壮且支持更广泛的替代方案。

全球可访问性和用户偏好

• 高对比度主题：使用 CSS 变量和 @when 规则来实现高对比度主题，以满足有视觉障碍的用户的需求。允许用户自定义调色板和字体大小，以满足他们的特定需求。
• 减少动态效果：通过使用 CSS 变量，在用户于操作系统中启用了“减少动态效果”设置时禁用动画和过渡，从而尊重用户的偏好。prefers-reduced-motion 媒体查询可以与 @when 结合使用，以进行更精确的控制。
• 字体大小调整：允许用户使用 CSS 变量调整网站的字体大小。使用 @when 规则来调整元素的布局和间距以适应不同的字体大小，确保所有用户的可读性和可用性。

最佳实践和注意事项

• 浏览器兼容性：@when 规则仍然相对较新，浏览器支持尚未普及。在生产环境中使用它之前，请务必检查浏览器兼容性表格。考虑为旧版浏览器使用 polyfill 或后备解决方案。截至 2024 年末，浏览器支持仍然有限，更多地依赖 @container 和明智地使用带有 JavaScript 后备方案的 CSS 变量通常是更实用的方法。
• 特异性 (Specificity)：在使用 @when 规则时，要注意 CSS 的特异性。确保您的条件样式足够具体，以覆盖任何冲突的样式。
• 可维护性：使用 CSS 变量和注释使您的代码更具可读性和可维护性。避免创建过于复杂的、难以理解和调试的条件规则。
• 性能：虽然 @when 规则可以通过减少需要解析的 CSS 数量来提高性能，但明智地使用它很重要。过度使用条件规则可能会对性能产生负面影响，尤其是在较旧的设备上。
• 渐进增强 (Progressive Enhancement)：使用渐进增强来确保即使浏览器不支持 @when 规则，您的网站也能正常工作。为所有用户提供基本的、功能性的体验，然后为支持该功能的浏览器逐步增强它。

条件样式的未来

@when 规则代表了 CSS 的一个重大进步。它允许更具表现力和动态的样式，为更复杂和响应更灵敏的 Web 应用程序铺平了道路。随着浏览器支持的改善和规范的发展，@when 规则很可能成为 Web 开发人员的重要工具。

CSS Houdini 的进一步发展和自定义状态的标准化将进一步增强 @when 的能力，允许对样式进行更精细的控制，并与 JavaScript 进行更无缝的集成。

结论

CSS @when 规则提供了一种强大而灵活的方式，可以根据容器查询、自定义状态、CSS 变量和其他标准来有条件地应用样式。虽然浏览器支持仍在不断发展，但它是您工具库中一个宝贵的工具，可用于创建能够适应不同环境和用户偏好的动态和响应式网页设计。通过理解 @when 规则的基础知识并遵循最佳实践，您可以释放其全部潜力，创造出真正卓越的用户体验。请记住，始终在不同的浏览器和设备上进行彻底测试，以确保兼容性和最佳性能。

随着网络的不断发展，拥抱像 @when 这样的新 CSS 功能对于保持领先地位并向全球受众提供前沿的网络体验至关重要。