CSS @when 规则：掌握条件化样式应用

CSS 的世界在不断发展，为开发者提供了更强大、更灵活的方式来设计网页样式。其中一个备受关注的功能就是 @when 规则，也称为 CSS 条件规则模块第一级（CSS Conditional Rules Module Level 1）。该规则允许您根据特定条件的满足情况有条件地应用 CSS 样式。它是响应式设计、功能检测和创建更健壮、适应性更强的样式表的强大工具。

什么是 CSS @when 规则？

@when 规则是 CSS 中的一个条件 at-rule，它允许您定义仅在某些条件为真时才应用的样式。可以将其视为 CSS 的 if 语句。与主要关注视口特性（屏幕尺寸、方向等）的媒体查询不同，@when 提供了一种更通用、更可扩展的方式来处理条件样式。它扩展了现有的条件 at-rule，如 @supports 和 @media。

使用 @when 的主要优势

提高代码可读性：通过将条件逻辑封装在 @when 块中，可以使您的 CSS 更易于理解和维护。特定样式应用背后的意图变得更加清晰。
增强灵活性：@when 可以处理比传统媒体查询更复杂的条件，特别是与功能查询和 JavaScript 驱动的逻辑（使用 CSS 自定义属性）结合使用时。
简化功能检测：@when 与 @supports 无缝集成，允许您仅在特定浏览器功能可用时应用样式。这对于渐进增强至关重要。
更具语义化的样式：@when 允许您根据元素的状态或上下文来设计样式，从而产生更具语义化和可维护性的 CSS。例如，根据 JavaScript 设置的 data 属性或自定义属性来设计元素样式。

@when 规则的语法

@when 规则的基本语法如下：

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

<condition> 可以是任何评估结果为 true 或 false 的有效布尔表达式。该表达式通常涉及：

媒体查询：基于视口特性（例如，屏幕宽度、设备方向）的条件。
功能查询 (@supports)：基于浏览器对特定 CSS 功能的支持情况的条件。
布尔代数：使用逻辑运算符（and、or、not）组合多个条件。

@when 实践示例

让我们通过一些实践示例来阐释 @when 规则的强大功能和多功能性。

1. 使用 @when 和媒体查询进行响应式设计

@when 最常见的用例是响应式设计，您可以根据屏幕尺寸调整样式。虽然媒体查询本身可以实现这一点，但 @when 提供了一种更结构化、更易读的方法，尤其是在处理复杂条件时。

@when (min-width: 768px) and (max-width: 1023px) {
  body {
    font-size: 18px;
    line-height: 1.6;
  }
  .container {
    width: 720px;
    margin: 0 auto;
  }
}

在此示例中，@when 块内的样式仅在屏幕宽度介于 768px 和 1023px 之间（典型的平板电脑尺寸）时应用。这为定义特定视口范围的样式提供了一种清晰简洁的方式。

国际化说明：响应式设计对全球受众至关重要。需要考虑不同地区的屏幕尺寸差异。例如，在某些国家，移动设备使用率更高，这使得移动优先设计变得更加关键。

2. 使用 @when 和 @supports 进行功能检测

@when 可以与 @supports 结合使用，仅在浏览器支持特定 CSS 功能时应用样式。这使您可以渐进式地增强您的网站，为使用现代浏览器的用户提供更好的体验，同时仍与旧版浏览器保持兼容。

@when supports(display: grid) {
  .container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    grid-gap: 20px;
  }
}

@when not supports(display: grid) {
  .container {
    /* 为不支持 grid 的浏览器提供的回退样式 */
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }
  .item {
    width: calc(50% - 10px); /* 为旧版浏览器调整宽度 */
  }
}

在这里，我们使用 @supports 来检查浏览器是否支持 CSS 网格布局（CSS Grid Layout）。如果支持，我们将基于网格的样式应用于 .container。如果不支持，我们使用 flexbox 提供回退样式，以确保在旧版浏览器中实现类似的布局。

全球可访问性说明：功能检测对于可访问性非常重要。旧版浏览器可能缺乏对较新的 ARIA 属性或语义化 HTML5 元素的支持。请提供适当的回退方案以确保内容保持可访问。

3. 结合媒体查询和功能查询

@when 的真正威力在于它能够结合媒体查询和功能查询，创建更复杂、更精细的条件样式规则。

@when (min-width: 768px) and supports(backdrop-filter: blur(10px)) {
  .modal {
    background-color: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(10px);
  }
}

在此示例中，只有当屏幕宽度至少为 768px 并且浏览器支持 backdrop-filter 属性时，.modal 元素才会有模糊背景。这使您可以在现代浏览器上创建视觉上吸引人的效果，同时避免在旧版浏览器上出现潜在的性能问题或渲染故障。

4. 基于自定义属性（CSS 变量）的样式

@when 也可以与 CSS 自定义属性（也称为 CSS 变量）结合使用，以创建动态和状态驱动的样式。您可以使用 JavaScript 更新自定义属性的值，然后使用 @when 根据该值应用不同的样式。

首先，定义一个自定义属性：

:root {
  --theme-color: #007bff; /* 默认主题颜色 */
  --is-dark-mode: false;
}

然后，使用 @when 根据自定义属性的值应用样式：

@when var(--is-dark-mode) = true {
  body {
    background-color: #333;
    color: #fff;
  }
  a {
    color: #ccc;
  }
}

最后，使用 JavaScript 来切换 --is-dark-mode 自定义属性的值：

document.getElementById('darkModeToggle').addEventListener('click', function() {
  document.documentElement.style.setProperty('--is-dark-mode', this.checked);
});

这允许用户在浅色和深色主题之间切换，CSS 会根据自定义属性值动态更新。请注意，在 @when 中直接比较 CSS 变量可能并非所有浏览器都普遍支持。相反，您可能需要使用一种变通方法，即通过媒体查询检查一个非零值：

@when ( --is-dark-mode > 0 ) { ... }

但是，要确保自定义属性具有数值才能使其正常工作。

可访问性说明：提供替代主题（例如，深色模式）对于可访问性至关重要。有视觉障碍的用户可能会从高对比度主题中受益。请确保您的主题切换可以通过键盘和屏幕阅读器访问。

5. 基于 Data 属性的样式

您还可以将 @when 与 data 属性一起使用，根据其数据值为元素设置样式。这对于创建动态界面非常有用，其中元素的外观会根据用户交互或数据更新而改变。

例如，假设您有一个任务列表，每个任务都有一个 data-status 属性，用于指示其状态（例如，“todo”、“in-progress”、“completed”）。您可以使用 @when 根据每个任务的状态为其设置不同的样式。

[data-status="todo"] {
  /* todo 任务的默认样式 */
  color: #333;
}

@when attribute(data-status string equals "in-progress") {
  [data-status="in-progress"] {
    color: orange;
    font-style: italic;
  }
}

@when attribute(data-status string equals "completed") {
  [data-status="completed"] {
    color: green;
    text-decoration: line-through;
  }
}

注意：对 attribute() 测试条件的支持可能在所有浏览器中受到限制或未完全实现。请务必进行全面测试。

浏览器兼容性和 Polyfills

截至 2024 年底，浏览器对 @when 规则的支持仍在发展中。虽然许多现代浏览器支持核心功能，但一些旧版浏览器可能不支持。因此，检查兼容性表格并在必要时使用适当的回退方案或 polyfills 至关重要。

请务必查阅 Can I use... 等资源，以检查 @when 及相关功能的当前浏览器支持状态。

使用 @when 的最佳实践

保持条件简单：避免在 @when 块中使用过于复杂的条件。将复杂的逻辑分解为更小、更易于管理的部分。
提供回退方案：始终为不支持您在 @when 规则中使用的功能的浏览器提供回退样式。这可确保在不同浏览器中获得一致的体验。
全面测试：在各种浏览器和设备上测试您的 CSS，以确保您的 @when 规则按预期工作。
使用有意义的注释：在您的 CSS 中添加注释，以解释每个 @when 规则的用途及其所依据的条件。这将使您的代码更易于理解和维护。
考虑性能：避免过度使用 @when 规则，因为它们可能会影响性能。优化您的 CSS，以尽量减少需要评估的规则数量。

结论

@when 规则是 CSS 工具箱的强大补充，为开发人员提供了一种更灵活、更具表现力的方式来有条件地应用样式。通过将其与媒体查询、功能查询和 CSS 自定义属性相结合，您可以创建更健壮、适应性更强且更易于维护的样式表。虽然浏览器支持仍在发展中，但 @when 是一个值得探索并融入您的现代网页开发工作流程的功能。

随着网络的不断发展，掌握像 @when 这样的功能对于为全球用户创造引人入胜、易于访问和高性能的体验至关重要。拥抱条件样式的力量，在您的 CSS 开发中开启新的可能性。