CSS 媒体查询与偏好：`prefers-contrast` 与 `prefers-color-scheme` 的自动适配

大家好，今天我们来深入探讨CSS媒体查询中两个非常重要的特性：prefers-contrast和prefers-color-scheme，以及如何利用它们实现网站的自动适配，提升用户体验，特别是对于有视觉障碍或特定偏好的用户。

一、引言：为什么关注用户偏好？

随着Web技术的日益成熟，我们越来越关注用户体验。一个优秀的网站不仅要功能强大，界面美观，更要易于使用，并且能够根据用户的个人偏好进行调整。考虑到不同用户的视觉能力、使用环境和个人喜好存在差异，提供个性化的视觉体验变得至关重要。

prefers-contrast和prefers-color-scheme这两个CSS媒体查询，正是帮助我们实现这一目标的关键工具。它们允许我们检测用户操作系统或浏览器设置的对比度偏好和颜色主题偏好，从而动态地调整网站的样式，提供最佳的视觉体验。

二、prefers-color-scheme: 颜色主题偏好

prefers-color-scheme媒体查询用于检测用户是否请求浅色或深色主题。它可以接受以下几个值：

light: 用户偏好浅色主题。
dark: 用户偏好深色主题。
no-preference: 用户没有明确的偏好。

2.1 基本用法示例

以下代码展示了如何使用prefers-color-scheme来切换网站的背景色和文本颜色：

body {
  background-color: white;
  color: black;
}

@media (prefers-color-scheme: dark) {
  body {
    background-color: black;
    color: white;
  }
}

这段代码首先定义了默认的浅色主题样式。然后，使用@media (prefers-color-scheme: dark)媒体查询，当用户偏好深色主题时，将背景色设置为黑色，文本颜色设置为白色。

2.2 结合变量简化代码

为了提高代码的可维护性，可以使用CSS变量来管理颜色值：

: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变量的值，就可以轻松切换整个网站的颜色主题。

2.3 更复杂的颜色方案

除了简单的背景色和文本颜色切换，还可以根据深浅主题调整其他元素的颜色，例如按钮、链接和表单控件。

:root {
  --primary-color: #007bff;
  --secondary-color: #6c757d;
  --bg-color: white;
  --text-color: black;
}

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

a {
  color: var(--primary-color);
}

button {
  background-color: var(--primary-color);
  color: white;
}

@media (prefers-color-scheme: dark) {
  :root {
    --primary-color: #5bc0de; /* 更亮的蓝色 */
    --secondary-color: #868e96;
    --bg-color: #333; /* 深灰色 */
    --text-color: #f8f9fa; /* 浅灰色 */
  }
}

在这个例子中，我们定义了主色和辅助色，并根据深色主题调整了它们的颜色值。这样，即使在深色主题下，按钮和链接也能保持良好的可见性。

2.4 JavaScript配合使用

虽然prefers-color-scheme主要依赖CSS来实现主题切换，但有时需要使用JavaScript来处理更复杂的情况，例如：

存储用户的偏好，以便在用户下次访问时恢复主题。
监听操作系统的主题变化事件，并动态更新网站的样式。
提供手动切换主题的选项。

以下代码展示了如何使用JavaScript来监听操作系统的主题变化事件：

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

  function setTheme(isDark) {
    if (isDark) {
      document.body.classList.add('dark-theme');
      document.body.classList.remove('light-theme');
    } else {
      document.body.classList.add('light-theme');
      document.body.classList.remove('dark-theme');
    }
  }

  prefersDark.addEventListener('change', (e) => {
    setTheme(e.matches);
  });

  // 初始化主题
  setTheme(prefersDark.matches);
}

这段代码首先检查浏览器是否支持window.matchMedia API。然后，创建一个MediaQueryList对象来监听prefers-color-scheme媒体查询的变化。当操作系统的主题发生变化时，change事件会被触发，setTheme函数会根据新的主题设置body元素的class属性。

三、prefers-contrast: 对比度偏好

prefers-contrast媒体查询用于检测用户是否请求更高的或更低的对比度。它可以接受以下几个值：

no-preference: 用户没有明确的偏好。
less: 用户偏好较低的对比度。
more: 用户偏好较高的对比度。
custom: 用户使用自定义的对比度设置。

3.1 基本用法示例

以下代码展示了如何使用prefers-contrast来调整按钮的边框颜色：

button {
  border: 1px solid #ccc;
}

@media (prefers-contrast: more) {
  button {
    border-color: black;
  }
}

这段代码首先定义了默认的按钮边框颜色。然后，使用@media (prefers-contrast: more)媒体查询，当用户偏好更高的对比度时，将边框颜色设置为黑色。

3.2 调整颜色对比度

更常见的情况是，我们需要调整文本和背景之间的颜色对比度，以提高可读性。可以使用CSS的color-contrast()函数来实现这一点。

color-contrast()函数接受一个颜色值和一个颜色列表作为参数。它会从颜色列表中选择与给定颜色对比度最高的颜色。

body {
  background-color: white;
  color: black;
}

@media (prefers-contrast: more) {
  body {
    color: color-contrast(white vs black, white);
  }
}

在这个例子中，当用户偏好更高的对比度时，color-contrast()函数会比较白色和黑色与背景色（白色）的对比度，并选择对比度最高的颜色（黑色）作为文本颜色。

3.3 更精细的控制

除了简单的颜色对比度调整，还可以根据对比度偏好调整字号、字体粗细和间距等样式，以进一步提高可读性。

body {
  font-size: 16px;
  line-height: 1.5;
}

@media (prefers-contrast: more) {
  body {
    font-size: 18px;
    font-weight: bold;
    line-height: 1.7;
  }
}

这段代码在用户偏好更高对比度时，增大了字号，加粗了字体，并增加了行距，从而提高了文本的可读性。

3.4 结合prefers-color-scheme使用

prefers-contrast和prefers-color-scheme可以结合使用，以提供更精细的视觉体验。例如，可以根据深浅主题和对比度偏好调整按钮的样式：

button {
  background-color: #007bff;
  color: white;
  border: none;
}

@media (prefers-color-scheme: dark) {
  button {
    background-color: #5bc0de;
  }
}

@media (prefers-contrast: more) {
  button {
    border: 2px solid black;
  }
}

@media (prefers-color-scheme: dark) and (prefers-contrast: more) {
  button {
    border-color: white;
  }
}

这段代码首先定义了默认的按钮样式。然后，根据深色主题调整了背景颜色。接着，根据更高的对比度偏好添加了边框。最后，当用户同时偏好深色主题和更高的对比度时，将边框颜色设置为白色。

四、no-preference 值的处理

当用户没有明确指定颜色方案或对比度偏好时，prefers-color-scheme 和 prefers-contrast 的值会是 no-preference。默认情况下，浏览器会应用网站定义的默认样式。然而，我们也可以针对 no-preference 值定义样式，以便更精细地控制网站的视觉呈现。

例如，可以设置一个中间色调，当用户没有明确偏好时使用：

body {
    background-color: #f0f0f0; /* 浅灰色 */
    color: #333; /* 深灰色 */
}

@media (prefers-color-scheme: dark) {
    body {
        background-color: #333;
        color: #f0f0f0;
    }
}

@media (prefers-color-scheme: light), (prefers-color-scheme: no-preference) {
    body {
        background-color: #f0f0f0; /* 浅灰色 */
        color: #333; /* 深灰色 */
    }
}

在这个例子中，没有指定 prefers-color-scheme 的用户会看到浅灰色的背景和深灰色的文字。显式地指定 prefers-color-scheme: light 确保了浅色模式的样式被应用，即使浏览器默认返回 no-preference。

五、测试与调试

在开发过程中，需要测试和调试prefers-contrast和prefers-color-scheme媒体查询。可以使用以下方法：

浏览器开发者工具: 大多数浏览器都提供了模拟媒体查询的功能。可以在开发者工具中手动切换颜色主题和对比度偏好，以测试网站的样式。
操作系统设置: 可以在操作系统中更改颜色主题和对比度设置，以测试网站在真实环境下的表现。
使用 JavaScript: 可以使用 JavaScript 来检测当前的颜色主题和对比度偏好，并在控制台中输出，以便调试。

六、代码示例：一个完整的例子

下面是一个完整的代码示例，展示了如何使用prefers-contrast和prefers-color-scheme来创建一个可适应用户偏好的网站：

<!DOCTYPE html>
<html>
<head>
  <title>Adaptive Website</title>
  <style>
    :root {
      --bg-color: white;
      --text-color: black;
      --primary-color: #007bff;
      --secondary-color: #6c757d;
    }

    body {
      background-color: var(--bg-color);
      color: var(--text-color);
      font-family: sans-serif;
      line-height: 1.6;
      margin: 0;
      padding: 20px;
    }

    h1 {
      color: var(--primary-color);
    }

    a {
      color: var(--primary-color);
      text-decoration: none;
    }

    a:hover {
      text-decoration: underline;
    }

    button {
      background-color: var(--primary-color);
      color: white;
      border: none;
      padding: 10px 20px;
      cursor: pointer;
    }

    button:hover {
      opacity: 0.8;
    }

    @media (prefers-color-scheme: dark) {
      :root {
        --bg-color: #333;
        --text-color: #f8f9fa;
        --primary-color: #5bc0de;
        --secondary-color: #868e96;
      }
    }

    @media (prefers-contrast: more) {
      body {
        font-size: 1.1em;
        line-height: 1.8;
      }

      a {
        font-weight: bold;
      }

      button {
        border: 2px solid black;
      }
    }

    @media (prefers-color-scheme: dark) and (prefers-contrast: more) {
      button {
        border-color: white;
      }
    }
  </style>
</head>
<body>
  <h1>Welcome to My Adaptive Website</h1>
  <p>This website adapts to your preferred color scheme and contrast settings.</p>
  <p>Learn more <a href="#">here</a>.</p>
  <button>Click Me</button>
</body>
</html>

这个例子创建了一个简单的网页，其中包含标题、段落、链接和按钮。它使用CSS变量来管理颜色值，并使用prefers-contrast和prefers-color-scheme媒体查询来调整网站的样式，以适应用户的偏好。

七、浏览器兼容性

prefers-color-scheme 和 prefers-contrast 具有良好的浏览器兼容性。大多数现代浏览器，包括 Chrome, Firefox, Safari, 和 Edge 都支持这两个媒体查询。然而，为了确保最佳的用户体验，建议进行充分的测试，并为不支持这些媒体查询的旧版浏览器提供备选方案。

八、最佳实践

提供默认样式: 为所有用户提供合理的默认样式，即使他们没有指定颜色主题或对比度偏好。
使用CSS变量: 使用CSS变量来管理颜色值，以便轻松切换主题。
测试不同组合: 测试不同的颜色主题和对比度偏好组合，以确保网站在各种情况下都能正常工作。
考虑无障碍性: 在设计网站时，始终考虑无障碍性。使用prefers-contrast和prefers-color-scheme媒体查询可以帮助你创建更易于使用的网站。
渐进增强: 使用渐进增强的方法，确保网站在不支持prefers-contrast和prefers-color-scheme媒体查询的浏览器中也能正常工作。
避免过度依赖 JavaScript: 尽量使用CSS来实现主题切换，避免过度依赖JavaScript，以提高性能和可维护性。

九、总结：关注用户，提升体验

通过合理地利用 CSS 媒体查询中的 prefers-contrast 和 prefers-color-scheme，我们可以轻松地构建出更具包容性和易用性的网站。根据用户偏好自动适配颜色主题和对比度，不仅提升了用户体验，也体现了对不同用户群体需求的尊重。最终，这将使我们的网站更加受欢迎，并能服务于更广泛的受众。

更多IT精英技术系列讲座，到智猿学院

CSS 媒体查询与偏好：prefers-contrast 与 prefers-color-scheme 的自动适配

发表回复 取消回复

CSS 媒体查询与偏好：`prefers-contrast` 与 `prefers-color-scheme` 的自动适配

发表回复取消回复