Preferreds-reduced-motion 媒体查询可检测用户是否已请求 操作系统,以尽可能减少其使用的动画或动作量。
并非每个人都喜欢装饰性动画或转场效果,有些用户会直接体验到动画效果
使用视差滚动、缩放效果等特效。用户偏好设置媒体
“prefers-reduced-motion
”查询可让您针对
都表明了这种偏好
浏览器支持
-
<ph type="x-smartling-placeholder">
-
<ph type="x-smartling-placeholder">
-
<ph type="x-smartling-placeholder">
-
<ph type="x-smartling-placeholder">
现实生活和网络上的动作过多
前几天,我和孩子们一起滑冰。今天天气不错,阳光明媚,结冰 溜冰场上挤满了人 ⛸。唯一的问题是:我不太擅长与人相处。如此一来, 很多移动的目标,我都无法专注于任何事情,最终会迷失方向,感到无所不能 这就像凝视着蚂蚁 🐜?。
<ph type="x-smartling-placeholder">![一群大脚溜冰的人。](https://web.developers.google.cn/static/articles/prefers-reduced-motion/image/throng-feet-ice-skating-57c271f1a5c82.jpg?authuser=7&hl=ro)
这种情况偶尔会在网络上出现:闪烁的广告、奇妙的视差效果、令人惊讶的
动画、自动播放视频等等,网络有时可能会变得不堪重负...
值得高兴的是,与现实生活不同,这个问题有解决办法。CSS 媒体查询
prefers-reduced-motion
可让开发者为偏好的用户创建网页变体
减少动作。包括禁止自动播放视频
停用某些纯装饰效果,对特定用户彻底重新设计网页。
在深入了解这一功能之前,我先回过头来想一想动画的用途 。如果需要,您还可以跳过背景信息, 直接查看技术细节
网页上的动画
动画常常用于向用户提供反馈,例如告诉他们 收到并正在处理一个操作。例如,在购物网站上 显示动画效果,以便“飞行”放入虚拟购物车中,此图标显示在 。
另一个应用场景是利用运动 入侵用户感知 通过结合使用骨架屏幕、上下文元数据和低质量图片预览来 占用大量用户时间,并使整个体验更加快速。其思路是 同时尽快加载内容
最后还有装饰性效果,如动画渐变、视差滚动、背景 视频,以及其他几个视频。虽然许多用户喜欢这种动画,但也有一些用户不喜欢它们, 他们会感到分心或拖慢速度在最糟糕的情况下,用户甚至可能会 就像是真实的体验一样,因此对于这些用户来说,减少动画相当于医疗 必要性。
运动触发的前片声谱障碍
部分用户体验 动画内容让人分心或恶心。 例如,如果滚动动画的主要元素不是主要元素, 与滚动相关的元素会大幅移动。例如,视差滚动动画 可能会导致前景障碍,因为背景元素的移动速度与前景不同 元素。前庭(内耳)障碍反应包括头晕、恶心和偏头痛 头痛,有时需要卧床休息才能恢复。
在操作系统上移除动态效果
许多操作系统都有无障碍设置,用于指定使用较低 会长时间保持不动以下屏幕截图显示了 macOS Mojave 的 Reduce motion 偏好设置, Android Pie 的移除动画偏好设置。选中后,这些偏好设置会致使 系统不得使用装饰效果,例如应用启动动画。应用程序本身可以 也应遵从此设置,并移除所有不必要的动画。
![显示“减少运动”的 macOS 设置屏幕复选框。](https://web.developers.google.cn/static/articles/prefers-reduced-motion/image/a-screenshot-the-macos-s-02f7529755e96.png?authuser=7&hl=ro)
![显示“移除动画”的 Android 设置屏幕复选框。](https://web.developers.google.cn/static/articles/prefers-reduced-motion/image/a-screenshot-the-android-94061601243dd.png?authuser=7&hl=ro)
移除网页上的动画
媒体查询级别 5:减少动态
网络用户偏好通过媒体查询,作者可以测试和查询值或功能
用户代理或显示设备的信息,这与呈现的文档无关。媒体查询
已使用 prefers-reduced-motion
来检测用户是否设置了操作系统偏好设置来尽可能减少动画播放次数或
动画。它可能有两个可能的值:
no-preference
:表示用户在底层操作中没有偏好 系统。此关键字值在布尔值上下文中的求值结果为false
。reduce
:表示用户已设置操作系统偏好设置,以表明 界面应尽可能减少移动或动画,最好达到所有非必要 移动。
处理来自 CSS 和 JavaScript 上下文的媒体查询
与所有媒体查询一样,prefers-reduced-motion
可以从 CSS 上下文和
JavaScript 上下文。
为了说明两者,假设我有一个重要的注册按钮,希望用户点击。我 可以定义一种引人注目的“振动”但作为一名网络达人 只适合那些明确愿意使用动画的用户,而不是其他所有人,比如既能接受动画的用户, 选择退出动画的用户,或者使用无法理解媒体查询的浏览器的用户。
/*
If the user has expressed their preference for
reduced motion, then don't use animations on buttons.
*/
@media (prefers-reduced-motion: reduce) {
button {
animation: none;
}
}
/*
If the browser understands the media query and the user
explicitly hasn't set a preference, then use animations on buttons.
*/
@media (prefers-reduced-motion: no-preference) {
button {
/* `vibrate` keyframes are defined elsewhere */
animation: vibrate 0.3s linear infinite both;
}
}
为了说明如何通过 JavaScript 使用 prefers-reduced-motion
,假设我有
使用
Web Animations API。虽然 CSS 规则
将在用户偏好设置发生更改时由浏览器动态触发,对于 JavaScript
动画,我必须自己监听更改,然后手动停止可能正在飞行
动画(如果用户允许我重新启动它们):
const mediaQuery = window.matchMedia('(prefers-reduced-motion: reduce)');
mediaQuery.addEventListener('change', () => {
console.log(mediaQuery.media, mediaQuery.matches);
// Stop JavaScript-based animations.
});
请注意,实际媒体查询前后必须加上括号:
window.matchMedia('prefers-reduced-motion: reduce');
window.matchMedia('(prefers-reduced-motion: reduce)');
处理来自 <picture>
上下文的媒体查询
一个有趣的用例是,使动画 AVIF、WebP 或 GIF 的播放依赖于
media
属性。如果 (prefers-reduced-motion: no-preference)
的求值结果为 true
,则可放心
显示动画版本,否则显示静态版本:
<picture>
<!-- Animated versions. -->
<source
srcset="nyancat.avifs"
type="image/avif"
media="(prefers-reduced-motion: no-preference)"
/>
<source
srcset="nyancat.gif"
type="image/gif"
media="(prefers-reduced-motion: no-preference)"
/>
<!-- Static versions. -->
<img src="nyancat.png" alt="Nyan cat" width="250" height="250" />
</picture>
请参见以下示例。尝试切换设备的动作偏好设置,查看不同之处。
在请求时发现用户的偏好设置
Sec-CH-Prefers-Reduced-Motion
客户端提示标头
允许网站在请求时获取用户的动作偏好设置,
出于性能原因,允许服务器内嵌正确的 CSS。
演示
我根据 Rogério Vicente 的精彩作品
🐈? HTTP 状态猫。首先,花点时间欣赏一下这个笑话,
搞笑,我会等。现在您回来了,我来介绍一下
演示。滚动时,每个 HTTP 状态猫
交替从右侧或左侧交替显示。流畅的 60 FPS
但正如前面介绍的那样,有些用户可能不喜欢它,甚至会对它产生动作反应,因此
演示的编程遵循 prefers-reduced-motion
。这甚至可以是动态生成的
即时更改偏好设置,无需重新加载。如果用户更喜欢减少动作,
不必要的显示动画消失,只留下常规的滚动动作。通过
以下抓屏展示了实际演示:
prefers-reduced-motion
演示
应用
总结
尊重用户偏好对现代网站来说非常关键,随着浏览器越来越多地表明
以便 Web 开发者能够做到这一点。另一个已发布的示例是
prefers-color-scheme
,
检测用户更喜欢浅色还是深色配色方案。您可以在发布商学院中
prefers-color-scheme
,在我的文章 Hello Darkness, My Old Friend 🌒? 中提及。
CSS 工作组正在开展更多标准化工作
用户偏好设置媒体查询
prefers-reduced-transparency
(检测用户是否希望降低透明度),
prefers-contrast
(检测用户是否
已请求系统提高或降低相邻颜色之间的对比度),
和 inverted-colors
(检测用户是否
倾向于使用反色)。
(额外知识)在所有网站上强制减少移动
并非所有网站都会使用 prefers-reduced-motion
,也可能不是足够符合您的喜好。
如果出于任何原因,您确实想在所有网站上设置定格动画,您完全可以。让
就是在您访问的每个网页中插入包含以下 CSS 的样式表。那里
有几个
浏览器扩展程序
也需自行承担风险!
@media (prefers-reduced-motion: reduce) {
*,
::before,
::after {
animation-delay: -1ms !important;
animation-duration: 1ms !important;
animation-iteration-count: 1 !important;
background-attachment: initial !important;
scroll-behavior: auto !important;
transition-duration: 1ms !important;
transition-delay: -1ms !important;
}
}
其工作原理是,之前的 CSS 会替换所有动画和过渡的时长
以至于用户就看不到了由于某些网站依赖于动画
才能正常运行(也许某个步骤取决于
animationend
事件),
更激进的 animation: none !important;
方法行不通。即使是以前的黑客行为
保证在所有网站上都能成功(例如,不能采用
Web Animations API),因此请务必
并在发现应用出现损坏时将其停用
相关链接
- 最新编辑草稿 媒体查询 5 级 规范
prefers-reduced-motion
已开启 Chrome 平台状态。prefers-reduced-motion
Chromium 错误。- 眨眼 意图实现发布功能。
致谢
向已实施 Google Cloud 解决方案的 Stephen McGruer 表示诚挚的感谢
prefers-reduced-motion
Rob Dodson 也审核了此文档。
主打图片,由 Hannah Cauhepe 在 Un 创办网站上使用。