【第1650期】使用 Media Query 检测设备 Reduced Motion 设置
前言
利用Reduced Motion就可以在跨平台上做体验了，这个方式不错。今日早读文章由@Sivan授权分享。
正文从这开始～～
最近在看《Smooth Scrolling and Accessibility1 》这篇文章时，发现在 Safari 10.1 中增加了一个好玩的访问性检测——Reduced Motion2，因此可以通过特性检测区分并对一些配置较差或主动开启「减弱动态效果」的用户进行体验优化。
开启「减弱动态效果」
「减弱动态效果」设置无论在 MacOS 还是 iOS 里都隐藏的比较深：
MacOS：进入「系统偏好设置」-「辅助功能」-「显示器」，开启「减弱动态效果」；
iOS：进入「设置」-「通用」-「辅助功能」-「减弱动态效果」，开启选项。
开启「减弱动态效果」可以有效地降低 MacOS/iOS 系统糟糕的晕眩效果性能开销，从而达到系统更流畅的功效。
特性检测
Reduced Motion 功能的检测关键词是 prefers-reduced-motion，使用 CSS Media Query 就可以针对开启「减弱动态效果」的用户进行页面性能优化：
减少运动媒体查询可以提供替代动画的体验，把动画的最终帧样式展示给用户
@keyframes ambient {
// Keyframes for an ambient animation that is purely decorative.
}
.background {
animation: ambient 10s infinite alternate;
}
@media (prefers-reduced-motion) {
// Disable the non-essential animations.
.background {
animation: none;
}
}使用 JavaScript 则是使用 matchMedia 检测，还能监听改变事件：
var motionQuery = window.matchMedia('(prefers-reduced-motion)');
if (motionQuery.matches) {
/* reduce motion */
}
motionQuery.addListener( handleReduceMotionChanged );用 Safari 查看下面的演示，按照上面的切换方式来观察不同。
<div
role="presentation"
class="thingamabob">
</div>@keyframes pulse {
from {
height: 30vh;
width: 30vh;
}
25% {
background-color: #FCB100;
border: 14vh solid #495057;
box-shadow: 0 0 0 10vh #FCB100;
height: 70vh;
width: 70vh;
}
50% {
height: 30vh;
width: 30vh;
}
75% {
background-color: #F96700;
border: 4vh solid #495057;
box-shadow: 0 0 0 0.25vh #F96700;
height: 60vh;
width: 60vh;
}
}
body {
background-color: #495057;
}
.thingamabob {
/* Horizintally and vertically centers */
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
/* Resting size is fully styled, but without size animated */
background-color: #DB4700;
border-radius: 70vh;
height: 10vh;
border: 0.25vh solid #495057;
box-shadow: 0 0 0 0.25vh #DB4700;
width: 10vh;
/* Animation Settings */
animation-duration: 1.75s;
animation-fill-mode: both;
animation-iteration-count: infinite;
animation-name: pulse;
}
@media (prefers-reduced-motion: reduce) {
.thingamabob {
/* Stop the animation */
animation: none;
/* Provide alternate styling */
background-color: #47ACFA;
border: none;
border-radius: 0;
box-shadow: none;
height: 30vh;
width: 30vh;
}
}实例：https://codepen.io/ericwbailey/pen/PWJPrW
关闭减弱动态效果
打开减弱动态效果
使用场景
因为这是 MacOS/iOS 独有的设置，所以目前也只有在 Safari 里可以一用。这个功能非常适合为低配置设备的用户以及追求性能的用户做体验优化，因为很多用户会开启「减弱动态效果」来在旧设备上提升系统流畅度。
比如我的博客背景有一个大的 Canvas，很多人反映说访问时风扇狂啸，那么就可以在检测到开启「减弱动态效果」时主动关闭一些无关紧要的动画从而提升用户的体验。
自 Chrome 74 起，也支持该特性检测了
简化运动的简史
在2013年iOS 7对操作系统的视觉效果进行了重新设计，更改包括半透明和模糊，更简化的“平面”用户界面，以及诸如全屏缩放和平移等戏剧性动作效果。
虽然新的外观在很大程度上被接受，但是一些使用新的操作系统的人报告说新系统容易使人患有晕动病和眩晕。用户界面移动与用户的移动感或空间方向不一致，从而触发这样的效果。对患有前庭功能障碍的人影响会更大。
尽管技术在此之前无意中造成了不利影响，但iOS的普及使这个问题突显出来，因此Apple在操作系统首选项中添加了禁用前庭疾病患者运动效果的选项。
参考
https://css-tricks.com/smooth-scrolling-accessibility/
https://developer.apple.com/library/archive/releasenotes/General/WhatsNewInSafari/Articles/Safari_10_1.html#//apple_ref/doc/uid/TP40014305-CH12-DontLinkElementID_61
https://support.apple.com/en-us/HT202655
关于本文
作者：@Sivan
原文：http://lightcss.com/use-media-query-detect-reduced-motion/
为你推荐