CSS `forced-colors` `match-media` 属性的复杂样式适配

好家伙，直接上难度！各位听众，今天咱们来聊聊 CSS 里一个有点儿意思，但又容易让人头大的东西：forced-colors 和 match-media 的组合，以及如何用它们搞定复杂的样式适配。这俩哥们儿凑一块儿，能让你的网站在各种奇葩的颜色模式下都能保持优雅。准备好了吗？咱们这就开讲！

开场白：颜色，适配，与“被迫”

在座的各位，谁没见过那种颜色搭配辣眼睛的网站？尤其是在某些辅助功能开启，或者老式显示器上，简直是视觉灾难。forced-colors 就是来拯救我们的，它允许用户强制指定他们想要的颜色，覆盖你精心设计的配色方案。

但问题来了，用户想咋样就咋样，我们设计师的脸往哪儿搁？别急，match-media 来了，它能根据不同的媒体查询条件，应用不同的样式。所以，我们可以用 match-media 来检测 forced-colors 是否激活，然后根据情况调整我们的样式，保证网站的可读性和可用性。

第一部分：forced-colors 的前世今生

forced-colors 是一个 CSS 媒体查询特性，它用来检测用户是否开启了“强制颜色模式”。这种模式通常出现在操作系统或者浏览器层面，允许用户自定义颜色方案，比如高对比度模式。

简单来说，forced-colors: active 就表示用户启用了强制颜色模式。

举个栗子：

@media (forced-colors: active) {
  body {
    background-color: black; /* 强制背景色为黑色 */
    color: white; /* 强制文字颜色为白色 */
  }
}

这段代码的意思是，如果用户开启了强制颜色模式，那么页面的背景色就会变成黑色，文字颜色就会变成白色。是不是很简单粗暴？

需要注意的是： forced-colors 并不会直接改变你 CSS 里的颜色值，而是告诉我们用户是否开启了强制颜色模式。真正起作用的是浏览器或者操作系统提供的颜色映射。

第二部分：match-media 的妙用

match-media 是 JavaScript 提供的一个 API，它可以用来检测媒体查询条件是否匹配。在 CSS 中，我们通常使用 @media 规则来实现类似的功能。

但是，match-media 更加灵活，它可以在 JavaScript 中动态地检测媒体查询条件，并根据结果执行相应的操作。

JavaScript 版本的 match-media：

const prefersDark = window.matchMedia('(prefers-color-scheme: dark)');

if (prefersDark.matches) {
  // 用户喜欢暗色模式
  document.body.classList.add('dark-mode');
} else {
  // 用户喜欢亮色模式
  document.body.classList.remove('dark-mode');
}

prefersDark.addEventListener('change', (e) => {
  if (e.matches) {
    document.body.classList.add('dark-mode');
  } else {
    document.body.classList.remove('dark-mode');
  }
});

这段代码会检测用户是否喜欢暗色模式，并根据结果给 body 元素添加或移除 dark-mode 类。

第三部分：forced-colors + match-media = 完美适配？

现在，让我们把 forced-colors 和 match-media 结合起来，看看它们能擦出什么样的火花。

场景一：高对比度模式下的样式调整

假设我们有一个按钮，它的默认样式是这样的：

.button {
  background-color: #007bff;
  color: white;
  border: 1px solid #007bff;
}

在高对比度模式下，这个按钮可能看起来不太清楚，我们需要调整它的样式。

@media (forced-colors: active) {
  .button {
    background-color: Highlight; /* 使用系统高亮颜色 */
    color: HighlightText; /* 使用系统高亮文字颜色 */
    border: 1px solid ButtonText; /* 使用系统按钮文字颜色 */
  }
}

这里我们使用了 Highlight 和 HighlightText 这两个 CSS 系统颜色关键字。它们会根据用户设置的高对比度颜色方案自动调整。ButtonText 也是类似的系统颜色。

系统颜色关键字：

关键字	描述
Canvas	应用或文档内容的背景。
CanvasText	应用或文档内容中的文本。
Highlight	高亮显示项目时的背景。
HighlightText	高亮显示项目时的文本。
ButtonFace	按钮的表面颜色。
ButtonText	按钮上的文本颜色。
GrayText	禁用的文本颜色。
LinkText	链接的颜色。
VisitedText	访问过的链接的颜色。
ActiveText	选定的文本颜色。
Field	输入字段的背景颜色。
FieldText	输入字段中的文本颜色。

场景二：根据用户偏好调整颜色方案

除了高对比度模式，用户可能还有其他的颜色偏好，比如喜欢暗色模式。我们可以使用 match-media 来检测用户的颜色偏好，并根据结果调整颜色方案。

:root {
  --bg-color: white;
  --text-color: black;
}

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

@media (prefers-color-scheme: dark) {
  :root {
    --bg-color: black;
    --text-color: white;
  }
}

这段代码使用了 CSS 自定义属性（变量）来存储颜色值。如果用户喜欢暗色模式，那么 --bg-color 会变成黑色，--text-color 会变成白色。

场景三：复杂的组件样式适配

如果我们的网站包含复杂的组件，比如表格、图表等，那么在强制颜色模式下，我们需要更加细致地调整样式。

以表格为例：

table {
  border-collapse: collapse;
  width: 100%;
}

th, td {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: left;
}

th {
  background-color: #f2f2f2;
}

@media (forced-colors: active) {
  table {
    border: 1px solid ButtonText;
  }

  th, td {
    border: 1px solid ButtonText;
  }

  th {
    background-color: Canvas; /* 使用画布颜色 */
    color: ButtonText;
  }
}

这段代码会调整表格的边框颜色和表头背景色，使其在高对比度模式下更加清晰。

第四部分：实战演练：打造一个响应式主题切换器

光说不练假把式，让我们来做一个简单的响应式主题切换器。这个切换器可以根据用户的颜色偏好和是否开启强制颜色模式，自动切换主题。

HTML 结构：

<!DOCTYPE html>
<html>
<head>
  <title>响应式主题切换器</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1>你好，世界！</h1>
  <button id="theme-toggle">切换主题</button>
  <script src="script.js"></script>
</body>
</html>

CSS 样式 (style.css):

:root {
  --bg-color: white;
  --text-color: black;
  --button-bg-color: #007bff;
  --button-text-color: white;
}

body {
  background-color: var(--bg-color);
  color: var(--text-color);
  transition: background-color 0.3s, color 0.3s; /* 添加过渡效果 */
}

button {
  background-color: var(--button-bg-color);
  color: var(--button-text-color);
  border: none;
  padding: 10px 20px;
  cursor: pointer;
  transition: background-color 0.3s, color 0.3s; /* 添加过渡效果 */
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg-color: black;
    --text-color: white;
    --button-bg-color: #343a40;
  }
}

@media (forced-colors: active) {
  :root {
    --bg-color: Canvas;
    --text-color: CanvasText;
    --button-bg-color: Highlight;
    --button-text-color: HighlightText;
  }
}

JavaScript 代码 (script.js):

const themeToggle = document.getElementById('theme-toggle');

themeToggle.addEventListener('click', () => {
  document.body.classList.toggle('dark-mode');

  // 手动切换主题时，需要更新 localStorage 的值
  if (document.body.classList.contains('dark-mode')) {
    localStorage.setItem('theme', 'dark');
  } else {
    localStorage.setItem('theme', 'light');
  }
});

// 页面加载时，检查 localStorage 的值
const theme = localStorage.getItem('theme');

if (theme === 'dark') {
  document.body.classList.add('dark-mode');
}

// 监听 prefers-color-scheme 变化
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (e) => {
  if (e.matches) {
    document.body.classList.add('dark-mode');
    localStorage.setItem('theme', 'dark');
  } else {
    document.body.classList.remove('dark-mode');
    localStorage.setItem('theme', 'light');
  }
});

// 监听 forced-colors 变化 (这里只是示例，实际应用中可能不需要手动处理 forced-colors)
window.matchMedia('(forced-colors: active)').addEventListener('change', (e) => {
    console.log("Forced colors changed:", e.matches);
    // 在 forced-colors 激活时，通常应该依赖 CSS 系统颜色关键字，而不是手动切换主题
    // 这里为了演示，可以添加一些额外的逻辑，但请谨慎使用
});

这段代码实现了一个简单的按钮，点击它可以切换亮色和暗色主题。同时，它会根据用户的颜色偏好和是否开启强制颜色模式，自动切换主题。

第五部分：注意事项和最佳实践

使用系统颜色关键字： 在 forced-colors: active 的情况下，尽量使用系统颜色关键字，比如 Canvas、CanvasText、Highlight、HighlightText 等。这样可以保证你的网站能够适应用户设置的颜色方案。
避免硬编码颜色值： 尽量使用 CSS 自定义属性（变量）来存储颜色值，这样可以方便地修改颜色方案。
测试！测试！测试！ 在不同的浏览器和操作系统上测试你的网站，确保在高对比度模式下能够正常显示。
考虑辅助功能： 在设计网站时，要考虑到辅助功能，确保网站对所有用户都是可访问的。
谨慎使用 JavaScript： 在大多数情况下，CSS 媒体查询就足够了。只有在需要动态地调整样式时，才需要使用 JavaScript。
localStorage 的使用： 在用户手动切换主题时，可以使用 localStorage 来存储用户的偏好，这样下次用户访问网站时，就可以自动应用上次选择的主题。
过渡效果： 为颜色变化添加过渡效果，可以使切换更加平滑。

第六部分：总结与展望

forced-colors 和 match-media 是 CSS 中非常强大的工具，它们可以帮助我们打造更加灵活和可访问的网站。虽然它们的使用可能有些复杂，但是只要掌握了基本原理，就可以轻松应对各种挑战。

未来的 CSS 可能会提供更加强大的媒体查询特性，让我们能够更加方便地控制网站的样式。让我们一起期待 CSS 的发展吧！

最后的提醒：

记住，适配 forced-colors 的目标是尊重用户的选择，而不是强制用户接受你的设计。保持谦逊，保持开放，你的网站将会变得更加美好。

好了，今天的讲座就到这里。感谢各位的聆听！希望大家都能在 CSS 的世界里玩得开心！

发表回复 取消回复

发表回复取消回复