CSS `media-query` `prefers-contrast` `more/less` 值的精确应用

各位观众老爷，晚上好！我是你们的老朋友，今晚咱们就来聊聊 CSS media-query 中 prefers-contrast 这个家伙，尤其是它那两个有点神秘的参数：more 和 less。这玩意儿乍一看挺简单，但真正用起来，你会发现水深得很。别怕，今天咱们就一层层扒开它的外衣，看看里面到底藏着什么。

开场白：对比度，一个被忽视的小可爱

在Web开发的世界里，我们总是把目光聚焦在色彩、布局、动画这些花里胡哨的东西上，很容易忽略对比度这个默默奉献的小可爱。但对于一些视力障碍人士，或者在光线不佳的环境下使用设备的用户来说，对比度至关重要。它直接影响到内容的易读性和可访问性。

prefers-contrast 这个媒体查询就是为了解决这个问题而生的。它可以让我们根据用户的操作系统或浏览器设置，调整网页的对比度，从而提供更好的用户体验。

prefers-contrast: 基础用法，不废话直接上代码

首先，我们来看看 prefers-contrast 的基本用法。它接受三个值：

• no-preference: 用户没有指定对比度偏好。
• more: 用户偏好更高的对比度。
• less: 用户偏好更低的对比度。

/* 用户偏好更高对比度 */
@media (prefers-contrast: more) {
  body {
    background-color: black;
    color: white;
  }
}

/* 用户偏好更低对比度 */
@media (prefers-contrast: less) {
  body {
    background-color: #f0f0f0;
    color: #333;
  }
}

/* 用户没有指定对比度偏好 */
@media (prefers-contrast: no-preference) {
  body {
    background-color: white;
    color: black;
  }
}

这段代码非常简单，就是根据用户的对比度偏好，改变了页面的背景色和文字颜色。more 对应高对比度，less 对应低对比度，no-preference 对应默认对比度。

深水区：more 和 less 的精确应用，这才是重点！

好了，基础知识过完，现在我们进入深水区。more 和 less 这两个参数，看似简单，但它们背后的逻辑却有点复杂。

1. 操作系统和浏览器的实现差异

首先，我们需要明确一点：prefers-contrast 的具体实现，取决于操作系统和浏览器的支持程度。不同的操作系统和浏览器，对高对比度和低对比度的定义可能不一样。

• 操作系统层面: 操作系统通常会提供全局的对比度设置。例如，Windows 有“高对比度模式”，macOS 有“增加对比度”选项。
• 浏览器层面: 浏览器会读取操作系统的对比度设置，并将其传递给 CSS 媒体查询。

但是，问题来了。有些操作系统可能只提供“开启/关闭高对比度”的选项，而没有提供更细粒度的对比度控制。在这种情况下，浏览器可能只会支持 more 和 no-preference，而忽略 less。

2. 如何判断 more 和 less 的临界值？

这才是最令人头疼的地方。more 和 less 到底意味着什么？它们有没有一个具体的数值范围？很遗憾，没有！

CSS 规范并没有规定 more 和 less 的临界值。这意味着，浏览器可以根据自己的算法，来判断用户是否偏好更高的对比度或更低的对比度。

举个栗子：

假设你的操作系统提供了一个对比度滑块，范围是 0% 到 100%。浏览器可能会这样判断：

• 对比度大于 50% 时，prefers-contrast: more 为真。
• 对比度小于 50% 时，prefers-contrast: less 为真。
• 对比度等于 50% 时，prefers-contrast: no-preference 为真。

但这仅仅是一种假设。不同的浏览器可能会使用不同的算法。

3. 如何优雅地使用 more 和 less？

既然我们无法精确地控制 more 和 less 的临界值，那么我们该如何优雅地使用它们呢？

原则一：不要依赖绝对值

千万不要试图通过 more 和 less 来实现精确的对比度控制。例如，不要试图通过 more 来将对比度设置为 70%，通过 less 来将对比度设置为 30%。这是不可能的。

原则二：提供足够的对比度选择

为了确保所有用户都能获得良好的体验，我们应该提供足够的对比度选择。例如，我们可以提供三种对比度模式：

• 默认模式: 遵循用户的操作系统设置。
• 高对比度模式: 强制使用高对比度样式。
• 低对比度模式: 强制使用低对比度样式。

<button id="default-contrast">默认对比度</button>
<button id="high-contrast">高对比度</button>
<button id="low-contrast">低对比度</button>

<style>
  body {
    background-color: var(--bg-color, white);
    color: var(--text-color, black);
  }

  /* 默认对比度 */
  :root {
    --bg-color: white;
    --text-color: black;
  }

  /* 高对比度 */
  .high-contrast {
    --bg-color: black;
    --text-color: white;
  }

  /* 低对比度 */
  .low-contrast {
    --bg-color: #f0f0f0;
    --text-color: #333;
  }
</style>

<script>
  const defaultContrastBtn = document.getElementById('default-contrast');
  const highContrastBtn = document.getElementById('high-contrast');
  const lowContrastBtn = document.getElementById('low-contrast');
  const body = document.querySelector('body');

  defaultContrastBtn.addEventListener('click', () => {
    body.className = '';
  });

  highContrastBtn.addEventListener('click', () => {
    body.className = 'high-contrast';
  });

  lowContrastBtn.addEventListener('click', () => {
    body.className = 'low-contrast';
  });

  // JavaScript 中检测 prefers-contrast (可选增强)
  if (window.matchMedia('(prefers-contrast: more)').matches) {
     console.log('User prefers more contrast');
  } else if (window.matchMedia('(prefers-contrast: less)').matches) {
     console.log('User prefers less contrast');
  } else {
     console.log('User has no contrast preference');
  }

</script>

这段代码使用 CSS 变量来实现对比度切换。用户可以通过点击按钮，选择不同的对比度模式。同时，可以通过 JavaScript 检测用户的 prefers-contrast 设置，并进行相应的处理（例如，自动选择高对比度模式）。

原则三：使用 filter 属性进行微调

如果我们需要对对比度进行更精细的调整，可以使用 CSS filter 属性。filter 属性提供了一系列的图像处理效果，包括 contrast、brightness、grayscale 等。

/* 增加对比度 */
.increase-contrast {
  filter: contrast(1.2); /* 增加 20% 的对比度 */
}

/* 降低对比度 */
.decrease-contrast {
  filter: contrast(0.8); /* 降低 20% 的对比度 */
}

需要注意的是，filter 属性可能会影响性能，因此应该谨慎使用。

4. 最佳实践：结合 prefers-color-scheme

prefers-contrast 通常与 prefers-color-scheme 结合使用，以提供更全面的主题定制。prefers-color-scheme 用于检测用户是否偏好亮色主题或暗色主题。

/* 暗色主题，高对比度 */
@media (prefers-color-scheme: dark) and (prefers-contrast: more) {
  body {
    background-color: #121212;
    color: #ffffff;
  }
}

/* 亮色主题，高对比度 */
@media (prefers-color-scheme: light) and (prefers-contrast: more) {
  body {
    background-color: #ffffff;
    color: #000000;
  }
}

/* 暗色主题，低对比度 */
@media (prefers-color-scheme: dark) and (prefers-contrast: less) {
  body {
    background-color: #333333;
    color: #cccccc;
  }
}

/* 亮色主题，低对比度 */
@media (prefers-color-scheme: light) and (prefers-contrast: less) {
  body {
    background-color: #f0f0f0;
    color: #333333;
  }
}

这段代码根据用户的颜色主题和对比度偏好，提供了四种不同的主题样式。

5. 浏览器兼容性

prefers-contrast 的浏览器兼容性还算不错，主流浏览器都支持。但为了确保最佳的兼容性，建议使用 caniuse.com 查询最新的兼容性信息。

总结：prefers-contrast 的正确打开方式

说了这么多，我们来总结一下 prefers-contrast 的正确打开方式：

• 理解 more 和 less 的不确定性: 它们没有固定的临界值，取决于操作系统和浏览器的实现。
• 提供足够的对比度选择: 不要依赖 more 和 less 来实现精确的对比度控制，而是提供多种对比度模式供用户选择。
• 使用 filter 属性进行微调: 如果需要更精细的对比度调整，可以使用 filter 属性。
• 结合 prefers-color-scheme: 与 prefers-color-scheme 结合使用，提供更全面的主题定制。
• 关注浏览器兼容性: 使用 caniuse.com 查询最新的兼容性信息。

表格总结

特性	描述	建议
prefers-contrast	CSS 媒体查询，用于检测用户的对比度偏好。	了解其基本用法，并关注浏览器兼容性。
more 和 less	prefers-contrast 的两个值，分别表示用户偏好更高或更低的对比度。	不要依赖绝对值，理解其不确定性。
对比度控制	无法精确控制对比度。	提供足够的对比度选择，使用 CSS 变量和 JavaScript 来实现对比度切换。
filter 属性	可以使用 filter: contrast() 来进行微调。	谨慎使用，注意性能影响。
prefers-color-scheme	CSS 媒体查询，用于检测用户的颜色主题偏好。	结合使用，提供更全面的主题定制。
浏览器兼容性	主流浏览器都支持，但建议使用 caniuse.com 查询最新的兼容性信息。	使用前检查目标用户群体使用的浏览器是否支持。
JavaScript	可以使用 window.matchMedia() 检测 prefers-contrast 的值。	用于增强用户体验，例如自动选择高对比度模式。

最后的忠告：关注用户体验

记住，我们做这些事情的最终目的是为了提升用户体验。在设计网页时，要时刻关注用户的需求，提供易读、易用的界面。

希望今天的分享对你有所帮助。下次再见！