发布于 由admin

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; /* 添加边框以增强对比度 */
  }
}

这段代码做了什么？

  1. 默认样式： 先定义了一套默认的颜色方案，背景色是浅灰色，文字是深灰色，标题是蓝色，按钮是蓝色背景白色文字。
  2. @media (forced-colors: active)： 这个就是关键所在，它告诉浏览器，只有当用户启用了强制颜色模式时，才会应用这个 media query 里面的样式。

  3. 强制颜色： 在 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 有了更深入的了解。 记住，颜色是美丽的，但更重要的是，它应该为所有人服务。 谢谢大家！

（像素搬运工鞠躬退场）

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注