CSS `media-query` `forced-colors` `active` / `none` 值的应用策略

大家好，我是今天的主讲人，代号“像素搬运工”。今天咱们不搬砖，搬点颜色，聊聊 CSS 的 forced-colors 这个有点冷门但关键时刻能救命的家伙。

开场白：颜色背后的故事

各位有没有遇到过这样的情况：网页在你电脑上看起来美轮美奂，换到别人电脑上，或者换个操作系统，颜色就直接崩盘，对比度低到看不清，或者刺眼到想把屏幕砸了？这时候，就要请出我们的主角 forced-colors 了。

forced-colors 是一个 CSS media query 特性，它检测用户是否要求操作系统强制使用有限的颜色调色板。简单来说，就是用户通过操作系统设置，强制网页使用一套特定的颜色方案。这通常是因为用户有视觉障碍，或者需要更高的对比度才能看清屏幕。

forced-colors 登场：active vs none

forced-colors 有两个值：

active：表示用户启用了强制颜色模式。
none：表示用户没有启用强制颜色模式。

咱们可以利用这两个值，在用户启用强制颜色模式时，提供一套专门适配的样式，确保网页的可访问性和可用性。

实战演练：代码说话

光说不练假把式，咱们直接上代码。

/* 默认样式 */
body {
  background-color: #f0f0f0;
  color: #333;
}

h1 {
  color: #007bff;
}

button {
  background-color: #007bff;
  color: white;
  border: none;
  padding: 10px 20px;
  cursor: pointer;
}

/* 当用户启用强制颜色模式时 */
@media (forced-colors: active) {
  body {
    /* 背景色强制使用 Canvas */
    background-color: Canvas;
    /* 文字颜色强制使用 CanvasText */
    color: CanvasText;
  }

  h1 {
    /* 标题颜色强制使用 LinkText */
    color: LinkText;
  }

  button {
    /* 按钮背景色强制使用 ButtonFace */
    background-color: ButtonFace;
    /* 按钮文字颜色强制使用 ButtonText */
    color: ButtonText;
    /* 移除边框，防止与 ButtonFace 颜色冲突 */
    border: 1px solid ButtonText; /* 添加边框以增强对比度 */
  }
}

这段代码做了什么？

默认样式： 先定义了一套默认的颜色方案，背景色是浅灰色，文字是深灰色，标题是蓝色，按钮是蓝色背景白色文字。
@media (forced-colors: active)： 这个就是关键所在，它告诉浏览器，只有当用户启用了强制颜色模式时，才会应用这个 media query 里面的样式。
强制颜色： 在 forced-colors: active 里面，我们使用了一些特殊的颜色关键字，比如 Canvas、CanvasText、LinkText、ButtonFace、ButtonText。这些颜色关键字是操作系统提供的，它们会根据用户的设置自动调整颜色。
- Canvas: 通常是应用程序窗口或文档的背景色。
- CanvasText: 通常是在 Canvas 背景上的文本颜色。
- LinkText: 通常是链接的颜色。
- ButtonFace: 通常是按钮的背景色。
- ButtonText: 通常是按钮上的文本颜色。

颜色关键字的妙用

使用这些颜色关键字的好处是：

自动适配： 它们会自动适配用户的颜色设置，无需我们手动去调整颜色值。
可访问性： 它们通常会提供更高的对比度，更容易被视力障碍用户识别。
一致性： 它们可以确保网页的颜色与操作系统的颜色保持一致，提供更佳的用户体验。

更高级的玩法：forced-colors: none

虽然 forced-colors: active 用途更广，但有时我们可能需要针对没有启用强制颜色模式的用户做一些特殊处理。这时候，forced-colors: none 就派上用场了。

举个例子，假设你想在强制颜色模式下禁用一些花哨的动画效果，或者在非强制颜色模式下启用一些额外的视觉效果。

/* 默认样式，启用动画 */
.animated-element {
  animation: fadeIn 1s ease-in-out;
}

/* 当用户启用强制颜色模式时，禁用动画 */
@media (forced-colors: active) {
  .animated-element {
    animation: none;
  }
}

/* 当用户没有启用强制颜色模式时，添加额外的阴影效果 */
@media (forced-colors: none) {
  .animated-element {
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
  }
}

注意事项：兼容性问题

forced-colors 的兼容性并非完美，主要集中在一些老版本的浏览器上。在编写代码时，需要考虑到兼容性问题，可以采用以下策略：

渐进增强： 先编写基本的、兼容性好的样式，然后使用 forced-colors 来增强用户体验。
polyfill： 可以使用一些 polyfill 来模拟 forced-colors 的行为，但效果可能不太理想。
Feature Detection： 使用 JavaScript 来检测浏览器是否支持 forced-colors，然后根据结果来加载不同的样式。

下面是一个使用 JavaScript 进行 feature detection 的例子：

if (window.matchMedia('(forced-colors: active)').matches) {
  // 浏览器支持 forced-colors 并且用户启用了强制颜色模式
  console.log('Forced colors are active!');
  // 加载专门的样式表或者执行相应的 JavaScript 代码
} else {
  // 浏览器不支持 forced-colors 或者用户没有启用强制颜色模式
  console.log('Forced colors are not active.');
  // 加载默认的样式表或者执行默认的 JavaScript 代码
}

forced-colors 的最佳实践

颜色对比度： 在强制颜色模式下，务必确保颜色对比度足够高，以便用户能够轻松识别文本和元素。
语义化 HTML： 使用语义化的 HTML 标签，例如 <article>, <nav>, <aside> 等，可以帮助浏览器更好地理解网页的结构，从而更好地适配强制颜色模式。
无障碍ARIA属性： 使用 ARIA 属性来增强网页的可访问性，例如 aria-label, aria-describedby, aria-hidden 等。
测试！测试！测试！： 在不同的操作系统和浏览器上测试你的网页，确保在强制颜色模式下也能正常工作。尤其是Windows High Contrast mode。

forced-colors 与 Windows High Contrast Mode

Windows High Contrast Mode (HCM) 是 Windows 操作系统提供的一个辅助功能，它允许用户自定义颜色方案，以提高屏幕的可读性。 forced-colors 经常与 HCM 一起使用，因为 HCM 实际上就是一种强制颜色模式。

当用户启用 HCM 时，Windows 会强制应用程序使用用户定义的颜色方案。这意味着网页上的颜色可能会被覆盖，导致网页看起来与设计不符。这时候，forced-colors 就派上用场了，它可以帮助我们确保网页在 HCM 下也能提供良好的用户体验。

使用 CSS System Colors

除了上面提到的 Canvas、CanvasText 等颜色关键字，CSS 还提供了一系列 System Colors，它们可以用来匹配操作系统的颜色设置。

一些常用的 System Colors 包括：

ActiveBorder
ActiveCaption
AppWorkspace
Background
ButtonFace
ButtonHighlight
ButtonShadow
ButtonText
CaptionText
GrayText
Highlight
HighlightText
InactiveBorder
InactiveCaption
InactiveCaptionText
InfoBackground
InfoText
Menu
MenuText
Scrollbar
ThreeDDarkShadow
ThreeDFace
ThreeDHighlight
ThreeDLightShadow
ThreeDShadow
Window
WindowFrame
WindowText

使用 System Colors 可以让你的网页更好地融入操作系统的外观，提供更自然的用户体验。

表格总结：forced-colors 关键点

特性	描述
`forced-colors`	CSS media query 特性，检测用户是否启用了强制颜色模式。
`active`	表示用户启用了强制颜色模式。
`none`	表示用户没有启用强制颜色模式。
颜色关键字	例如 `Canvas`, `CanvasText`, `LinkText`, `ButtonFace`, `ButtonText` 等，它们是操作系统提供的，会根据用户的设置自动调整颜色。
System Colors	CSS 提供的一系列颜色关键字，用于匹配操作系统的颜色设置，例如 `ActiveBorder`, `ActiveCaption`, `Window`, `WindowText` 等。
兼容性	并非所有浏览器都支持 `forced-colors`，需要考虑兼容性问题，可以使用渐进增强、polyfill 或 feature detection 等策略。
最佳实践	确保颜色对比度足够高，使用语义化 HTML，使用 ARIA 属性，进行充分的测试。
Windows HCM	Windows High Contrast Mode (HCM) 是一种强制颜色模式，`forced-colors` 经常与 HCM 一起使用，以确保网页在 HCM 下也能提供良好的用户体验。

灵魂拷问：forced-colors 的意义

forced-colors 不仅仅是一个 CSS 特性，它代表了一种对可访问性的重视，是对所有用户的尊重。记住，我们编写代码不仅仅是为了让网页看起来漂亮，更是为了让每个人都能平等地访问信息。

下次在设计网页的时候，不妨花点时间考虑一下 forced-colors，让你的作品更加包容，更加人性化。

结束语：颜色无界，爱无疆

今天的分享就到这里，希望大家对 forced-colors 有了更深入的了解。记住，颜色是美丽的，但更重要的是，它应该为所有人服务。谢谢大家！

（像素搬运工鞠躬退场）

发表回复 取消回复

发表回复取消回复