⭐️ 本文首发自前端修罗场(点击加入)，是一个由资深开发者独立运行的专业技术社区，我专注 Web 技术、Web3、区块链、答疑解惑、面试辅导以及职业发展。博主创作的《前端面试复习笔记》（点击订阅），广受好评，已帮助多人提升实力、拿到 offer。现在订阅，私聊我即可获取一次免费的模拟面试机会，帮你评估知识点的掌握程度，获得更全面的学习指导意见！

引言：

当我们在使用APP时，我们在 设置中常会发现这么一项操作：如无图模式、夜间模式等等，这些设置项来自对用户偏好的考量。为了打造轻应用的进展中，在web中也将逐步实现这样的特性。今天，我们就来了解一下关于在web中打造用户偏好的特性。

适应用户偏好

在过去的几年里，浏览器实现了各种功能，可以使用CSS、JavaScript或检查服务器端的首选项来响应web上的用户偏好。在本文中，将展示浏览器当前公开的用户偏好、处理它们的最佳方式，以及对未来的展望，以了解可能很快就会出现什么。

perfers-reduced-motion

让我们从减少运动媒体查询（perfers-reduced-motion）开始。这项特性是在Safari10.1中引入的，目前在Safari、IOS Safari、Firefox和Chrome的最新版本中得到支持。

perfers-reduced-motion这项特性被用于检测用户是否需要系统将其使用的动画或运动最小化。你可以用下面的方式检测：

@media (perfers-reduced-motion: reduce) {/* disable animations/transitions 禁用动画或过渡*/
}

或者使用另一种方式：

var motionQuery = matchMedia('(perfers-reduced-motion)');
function handleReduceMotionChanged() {if (motionQuery.matches) {/*disabled animations/transitions 禁用动画或过渡*/}else {/*enable animations/transitions 开启动画或过渡*/}
}
motionQuery.addListenet(handleReduceMotionChanged);
handleReduceMotionChanged();

但是，对所有CSS 动画(animation)和过渡(transition)禁用perfers-reduced-motion:reduce的方式是：

@media (perfers-reduced-motion: reduce) {* {transition: none !important;animation: none !important;}
}

但是，这样做并不会触发动画开始/结束事件或关键帧(animation start/end events or keyframe states)状态。所以，如果你的代码依赖于这些事件，你还需要这么做：

@media (perfers-reduced-motion: reduce) {* {transition-duration: 0.1s !important;animation-duration: 0.1s !important;}
}

这样做的好处就是，即使用户喜欢 perfers-reduced-motion，你也能对部分元素使用animation或transition。

这里，我们推荐您阅读这篇文章： Designing Safer Web Animation For Motion Sensitivity 作者介绍了关于何时应该使用animation/transition。

prefers-color-scheme

另一个用户偏好是媒体查询中的prefers-color-scheme特性。目前Safari12.1和Firefox67均已得到支持（2019年3月10日）。

perfers-color-scheme这项特性很可能在MacOS的Dark/Light模式中比较熟悉。

例如，你可是在CSS中使用下面如下的方式来检查用户是否喜欢Dark模式。而对于Light模式，perfers-colors-scheme的默认值就是light

@media (perfers-color-scheme: dark) {/* adust style for dark mode 调整为Dark模式*/
}

同时，你可以使用js检测：

var colorSchemeQuery = matchMedia('(perfers-color-schme:dark)');
function handleColorsSchemeChanged() {if(colorSchemeQuery.matches) {/* dark mode*/}else {/* light mode */}
}
colorSchemeQuery.addListener(handleColorSchemeChanged);
handleColorsSchemeChanged()l

关于Dark 模式的设计，你可以阅读这篇文字： designing for dark mode。

Save data

接下来，我们看看 SaveData这个请求头。

用户可以在他们的浏览器中激活 SaveData 模式。而如果当用户启用这项模式时，开发人员可以设法提供系统字体而不是Web字体，或提供低分辨率图像而不是高分辨率图像等等，这样我们就能够提供一个轻应用的方式。

我们通过js方式检测：

if("connection" in navigator) {if (navigator.connection && navigator.connection.saveData === true) {// saveDate 模式 开启 - 不要假装高分辨率图像或网页字体等**重资源**}
}

或者使用服务端程序进行检测。例如PHP的方式是：

if (isset($_server[”HTTP_SAVE_DATA“]) && strtolower($_SERVER["HTTP_SAVE_DATA"])=== "on") {// 检测到 'Save-Data'$saveData = true;
}

目前，还没有针对Save-Data的媒体查询。

更多关于快速和轻应用程序的信息与保存数据，推荐这篇文字。

Do Not Track

这也是一项请求头特性。由于这项特性会跟踪用户，所以在Safari Technology Preview 75中被禁用了。同时，不确定其他浏览器是否也会禁用这项功能。

你可以使用js检测它：

var doNotTrack = (navigator.doNotTrack === "1" || navigator.doNotTrack === "yes" || navigator.msDoNotTrack === "1" || window.doNotTrack === "1");if (!doNotTrack) {/* 如果确实需要track，请加载分析*/
}

或者使用服务端程序进行检测。例如PHP的方式是：

$donottrack= (isset($_SERVER['HTTP_DNT']) && $_SERVER['HTTP_DNT'] == 1);
if (!$donottrack) {echo 'embed analytics script if you really need to';
}

展望

把决定权交给用户

如果您尊重用户的偏好，那么您还应该确保用户可以在您的站点上重新设置它，这是非常好的。一般情况下，用户可能更喜欢暗模式，但您的站点上可能更喜欢亮模式——所以您应该有一个设置来更改主题，并使用该设置覆盖浏览器公开/默认的一般用户设置。同时，总是要确保用户可以很容易地找到这些设置。

下一步

从媒体查询 Level 5这个阶段开始，我们可以看到接下来浏览器将会出现什么功能支持用户偏好。
如：inverted-colors 、perfers-reduced-transparency 、 perfers-contrast 。

正如你所看到的，目前有各种各样的方法来调整你的网站，以满足用户的偏好，在未来还会有更多的方法。这一特性有助于提高可访问性、性能和隐私，当您适应这些特性时，您可以让您的用户满意。

参考

MDN prefers-reduced-motion
An Introduction to the Reduced Motion Media Query

媒体查询特性 - 适应用户偏好 | perfers-reduced-motion | prefers-color-scheme | Save data相关推荐

减少运动媒体查询prefers-reduced-motion
简化运动的简史在2013年iOS 7对操作系统的视觉效果进行了重新设计,更改包括半透明和模糊,更简化的"平面"用户界面,以及诸如全屏缩放和平移等戏剧性动作效果. 虽然新的外观在很 ...
前端媒体查询知识梳理
媒体查询允许基于设备的不同特性来应用不同的样式申明.媒体查询可以有以下的表现和使用形式: 1. 通过 @media 和 @import 有条件的使用CSS 样式,如: 2. 用media= 属性为&l ...
媒体查询/最大宽度和最小宽度/
了解媒体查询 @media 媒体查询 screen 屏幕 and 并且 width: 600px 宽度600px 当媒体查询检测到屏幕宽度为 600px 的时候,执行花括号内写 css 代码.注意:媒 ...
总结CSS3新特性(媒体查询篇)
CSS3的媒体查询是对CSS2媒体类型的扩展,完善; CSS2的媒体类型仅仅定义了一些设备的关键字,CSS3的媒体查询进一步扩展了如width,height,color等具有取值范围的属性; medi ...
移动设备响应式网站之CSS媒体查询
http://www.ibm.com/developerworks/cn/web/wa-cssqueries/index.html 简介现今每天都有更多的手机和平板电脑问市.消费者能够拥有可想象到的 ...
使用 CSS 媒体查询创建响应式网站
简介现今每天都有更多的手机和平板电脑问市.消费者能够拥有可想象到的各种规格和形状的设备,但是网站开发人员却面临一个挑战:如何使他们的网站在传统浏览器.手机和平板电脑浏览器上有很好的效果,如何在各种大 ...
媒体查询漫谈——@media Queries
通过不同的媒体类型和条件定义样式表规则.媒体查询让CSS可以更精确作用于不同的媒体类型和同一媒体的不同条件.媒体查询的大部分媒体特性都接受min和max用于表达"大于或等于"和&q ...
响应式网页之媒体查询
由于现在的网页要兼容各种pc尺寸及ipad甚至手机屏幕,所以响应式的网页变得尤为重要.手写响应式网页,具体技术点有: 1.声明viewport元标签(响应式网页必备) <meta ...
CSS之七个高度有效的媒体查询技巧
我们都知道,Media Queries是实现响应式设计的秘密武器.在这篇文章中,将向大家介绍制定高质量的Media Queries需要注意的一些事项 1. 让内容确定断点很多时候,在响应式设计中,你 ...

媒体查询特性 - 适应用户偏好 | perfers-reduced-motion | prefers-color-scheme | Save data