带你读《2022技术人的百宝黑皮书》——下一代响应式Web设计： 组件驱动式Web设计（10）

带你读《2022技术人的百宝黑皮书》——下一代响应式Web设计： 组件驱动式Web设计（9）https://developer.aliyun.com/article/1340888?groupCode=taobaotech

prefers-reduced-motion

Web页面或应用难免少不了用一些动效来点缀，但有些用户不喜欢这些动画效果，甚至对于少数用户来说，这些动效会让他们身体不适。这就是为什么现在大多数设备都支持一种方法让用户根据自己的喜好来做设置。

使用prefers-reduced-motion媒体查询用于检测用户的系统是否被开启了动画减弱功能。比如下面的这个示例， 将会展示一组令人心烦的动画，不过当你开启了系统的“减少运动”后就能看到动画减弱的效果了。

.pulse {
animation: pulse 2s infinite;
}
@media screen and (prefers-reduced-motion: reduce) {
.pulse { animation: none;
}
}

示例效果演示的是prefers-reduced-motion媒体特性如何让animation停止，其实CSS的transition也可以实现动 画效果，加上并不是所有设备对动效都有一个很好的性能支持（毕竟动效是较耗性能的），因此，我们可以像下面这样来写CSS：

  @media screen and (prefers-reduced-motion: reduce), (update: slow) { 
* {
animation-duration: 0.001ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.001ms !important; 
}
  }

这段代码强制所有使用动画持续时间或过渡持续时间声明的动画以人眼无法察觉的速度结束。当用户要求减少动画体验，或者设备屏幕刷新率较低时，比如廉价智能手机，它就能工作。

另外，Eric Bailey 在他的文章《Revisiting prefers-reduced-motion, the reduced motion media query》（地址：https://css-tricks.com/revisiting-prefers-reduced-motion/）中提出了一个观点：

“并不是每一个可以访问网络的设备都可以呈现动画，或者流畅地呈现动画。”

对于刷新率低的设备来说，可能会导致动画出现问题，比如动画卡顿。这样的话，删除动画可能是更好的选择。我们可以将 prefers-reduced-motion 和 update 结合在一起使用：

  @media screen and (prefers-reduced-motion: reduce), (update: slow) { 
  * {
animation-duration: 0.001ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.001ms !important; 
}
  }

这段代码强制所有使用animation-duration或transition-duration声明的动画以人眼难以察觉的速度结束。当一个   人要求减少动效体验，或者设备有一个刷新率较低的屏幕，比如电子墨水或廉价的智能手机，它就能发挥作用。

但需要注意的是，使用动态减弱并不意味着“没有动效”，因为动效在Web页面中传达信息能起到至关重要的作用。相反，你应该使用一个坚实的、去除非必须的动效基础体验去引导这些用户，同时逐步增强没有此项偏好设置的其他用户的体验。

带你读《2022技术人的百宝黑皮书》——下一代响应式Web设计： 组件驱动式Web设计（11）https://developer.aliyun.com/article/1340885?groupCode=taobaotech