使用 `prefers-reduced-data` 创建网站

剧透警告：目前尚不支持此功能。 但它在 媒体查询级别 5 规范 中定义，其中包括其他较新的但更常用的用户偏好功能，如 `prefers-color-scheme` 和 `prefers-reduced-motion`。

Polypane 博客对 `prefers-reduced-data` 进行了深入的探讨，特别是对于我们尚未在实际中看到的某个功能而言。 这实际上是使 Polypane 团队成为该主题的理想发言人的原因。 它的产品是一款浏览器，能够模拟 Chromium 标志背后的功能。

同时，值得注意的是，规范指出了此功能在当前状态下的两个重大潜在问题

• 它可能成为一种不受欢迎的指纹来源，偏向于收入较低、数据有限的人群。 
• 此功能尚处于早期草案阶段，CSS-WG 认为它尚未准备好用于生产环境。

但这并不意味着我们不能开始熟悉它。 以下是它的工作原理

@media (prefers-reduced-data: reduce) {
  /* Stuff for reduced data preferences */
}

@media (prefers-reduced-data: no-preference) {
  /* Stuff for no data preferences */
}

我从这篇文章中赞赏的是它列出了大量可能的用例。 让我总结一下

• 有条件地加载字体。 也就是说，创建一个 `@font-face` 声明，然后在 body 上调用字体，一次针对 `no-preference` 的用户获取自定义字体，又一次针对 `reduced` 的用户获取较轻的字体堆栈。
• 背景图像。 您是否曾经使用过巨大的飞溅图像作为某些全宽英雄组件的背景？ 也许这只对那些具有 `no-preference` 的用户提供服务，而那些具有 `reduced` 的用户则只获得较小的变体或根本没有图像。
• HTML 中的较小图像。 这很聪明，因为请记住，我们在 `<source>` 元素上具有 `media` 属性。 因此，我们可以指示浏览器在使用 `<picture>` 时使用某些图像，例如：`<source srcset="small.jpg" media="(prefers-reduced-data: reduce)" />`。
• 有条件地预加载和自动播放视频。 正如我们可以在 HTML 中使用此功能一样，我们也可以在 JavaScript 中使用它，方法是使用 `window.matchMedia('(prefers-reduced-data: no-preference)').matches` 来根据数据偏好设置视频的 `autoplay` 和 `preload` 属性。
• 放弃无限滚动。 我通常会从一开始就放弃这种模式，但我们当然可以禁用它，这样那些偏好减少数据量的人就不会仅仅因为到达页面末尾而被迫获取更多内容（以及更多数据）。

当然，这不是一个最终的思路列表！ 我们一直在讨论在正确的时间向正确的人提供正确的资产，而这种媒体功能是在某些情况下帮助我们实现这一目标的绝佳工具。 也请考虑以下几点

• 提供已下载资产（例如 PDF）的低分辨率版本
• 链接到某些具有繁重体验的网站或页面
• 根据偏好有条件地加载整个脚本、样式表或库
• 可能还有数不胜数的其他更聪明的方法……

这条建议非常宝贵

就像 `prefers-reduced-motion` 一样，最好将 `prefers-reduced-data: reduce` 选项视为默认选项：人们获得精简、快速的体验，只有当他们表示 `no-preference` 时，我们才会向他们发送更多数据。 这样一来，较旧的 不支持媒体查询的浏览器默认情况下会获得精简体验。

是的。 与“移动优先”响应式设计的想法相同：从设计减少数据量开始，然后在向上扩展时进行增强。

直接链接 →