Reduced Motion Media Query 简介

开放网络的成功建立在可互操作的技术之上。 现在，除了缩放内容、安装扩展、启用高对比度显示、加载自定义样式表或禁用 JavaScript 等重要功能之外，还可以控制动画。

网站经常会向其受众提供自动播放、耗电量大、资源占用量大的动画。 人们需要能够重新控制动画，这一点可能比你最初想象的更为普遍。

Reduced Motion 的简要历史

2013 年发布的 iOS 7 对操作系统的外观进行了重大调整。 变化包括半透明度和模糊、更简化的“扁平”用户界面，以及全屏缩放和平移等动态效果。

虽然新外观普遍被接受，但一些使用更新操作系统的人 报告称出现晕动症和眩晕。 用户界面运动与用户对运动或空间方向的感觉不一致，从而引发了所报告的效果。

尽管这项技术在过去也曾无意中造成不良影响，但 iOS 的普及程度却使这个问题变得突出。 Apple 在无障碍方面提供了很大的支持，因此在操作系统偏好设置中 添加了一个选项，以禁用患有前庭疾病的人的运动效果。

前庭什么？

您的前庭系统提供一个内部传感器，用于在世界上传达您的身体的物理位置和方向，并且对于控制平衡和眼球运动至关重要。

前庭疾病 会导致您的前庭系统难以理解正在发生的事情，从而导致平衡能力下降和眩晕、偏头痛、恶心和听力损失。 任何曾经快速旋转过的人都会熟悉混乱的前庭系统。

前庭疾病可能是由遗传和环境因素造成的。 它属于无障碍问题所构成的 较大的条件范围，影响着超过 7000 万人。

呸！ 我感觉很好！ 这种情况永远不会发生在我身上

请记住：我们都只是暂时健全的。 也许您天生就患有这种疾病。 也许您会发烧或耳朵感染。 也许您会晕车或晕船。 也许您会患上肿瘤。 或者也许您只是变老了。

感觉有点晕可能看起来不是什么大不了的事，但那一刻的恶心可能是至关重要的：失去平衡摔倒、面试时头痛、恶心引发的呕吐在餐饮工作中、在操作汽车 UI 时晕倒等。

那我们该怎么办呢？

进入新的 Media Query

Safari 10.1 引入了 Reduced Motion Media Query。 它是一个非供应商前缀声明，允许开发人员“为在系统偏好设置中指定对减少运动的偏好设置的用户创建避免大范围运动的样式”。

语法非常简单

/* Applies styles when Reduced Motion is enabled */
@media screen and (prefers-reduced-motion: reduce) { }

@media screen and (prefers-reduced-motion) { }

Safari 将解析此代码并将其应用于您的网站，让您可以为启用了 Reduced Motion 选项的用户提供替代体验。

值得注意的是，(prefers-reduced-motion) 不带 reduce 关键字将被评估为真。 但是，我发现，在这些情况下，最好明确说明，尤其是对于较新和更晦涩的功能。

您也可以针对相反的情况

/* Applies styles when the user has made no preference known */
@media screen and (prefers-reduced-motion: no-preference) { }

将这个新的 Media Query 视为 类似于 @supports：描述初始外观，然后根据功能修改样式。

如何测试

那么，我们如何检查这个坏家伙呢？ 只要您使用的是最新版本的 MacOS，您应该可以在 Safari 中检查它。

转到系统偏好设置，选择无障碍类别，选择显示选项卡，然后启用减少运动选项。 您会看到，下面的 CodePen 示例中的示例动画在切换复选框时会更新：脉冲圆圈将更改为惰性正方形

查看 CodePen 的 Reduce Motion Media Query 示例，由 Eric Bailey (@ericwbailey) 在 CodePen 上创建。

如果您无法访问此功能，以下是一个简短的视频

您需要一个更实际的示例来说明 Media Query 如何应用吗？

来自纽约时报的这个功能 以全屏自动播放视频开头，模拟从高空坠落。

Reduced Motion Media Query 可以提供替代体验，将坠落动画替换为动画最后一帧的屏幕截图。

在此更新后的体验中，文章的内容在主题上仍然保持一致：对拟议的门户项目的精美呈现，以吸引读者。 该功能中其他不太戏剧性的动画可以保持不变，因为它们既是细微的过渡，又由读者故意浏览页面来激活。

故事的影响力得以保留，同时不会对试图阅读它的人造成潜在的伤害。 这是一举两得！

哼！ 似乎工作量很大

即使您忽略了构建无障碍网站的所有好处，也可能需要 习惯使用用户查询。

随着传统上由操作系统控制的功能 集成到浏览器中，创建能够优雅地适应用户偏好的体验将变得越来越重要。 Reduced Motion 可能将 很快将 得到其他浏览器的支持，作为一系列新的用户查询的一部分。

还需要考虑浏览器的意见——如果没有设计的替代方案，浏览器对减少运动的回退设置可能无法创建理想的体验。 事实上，如果仅靠动画传达有关您网站的重要信息，这些信息可能会丢失。

那么，我应该仅仅为了安全起见，去掉所有的动画吗？

这样做将是一个戏剧性的选择，并不一定有效。 动画在谨慎和克制地使用时，可以成为一种很好的方式，用于传达您网站各个部分之间的关系或状态之间的过渡，引导用户的注意力，简化对复杂概念的理解，或者仅仅是为了增添趣味。 正确使用动画甚至可以帮助 解决认知无障碍问题。

如果您想了解更多关于哪些动画更有可能引发前庭问题的信息，Val Head 在 A List Apart 上发表了一篇优秀的文章，论述了这个问题。