减少运动偏好：prefers-reduced-motion媒体查询详解-程序员充电站

减少运动偏好：`prefers-reduced-motion`媒体查询详解

一、`prefers-reduced-motion`的背景与意义

在Web开发中，动画和过渡效果常被用于增强用户体验，如视差滚动、缩放效果、自动播放视频等。然而，并非所有用户都喜欢或能够舒适地接受这些装饰性动画。部分用户，尤其是患有前庭运动障碍（vestibular motion disorders）的人群，在面对快速移动或闪烁的动画时，可能会感到头晕、恶心或不适。这类障碍可能由动画的快速闪烁、缩放或平移大型对象等触发，严重影响用户的浏览体验。

为了解决这一问题，许多操作系统提供了无障碍功能设置，允许用户指定减少动画的偏好。例如，macOS Mojave的“减少动作”设置、Android Pie的“移除动画”选项等。这些设置旨在最小化非必要的运动，为用户提供一个更加舒适和包容的浏览环境。然而，仅仅依靠操作系统的设置并不足以确保所有网站都能遵循用户的偏好。因此，Web开发者需要一种机制来检测用户的动画偏好，并据此调整网站的行为。

prefers-reduced-motion媒体查询正是为了满足这一需求而诞生的。它允许开发者检测用户是否已请求操作系统尽量减少所使用的动画或动作量，从而为偏好减少动画的用户设计一个动作减少的网站变体。这一特性不仅提升了网站的可访问性，还体现了对用户偏好的尊重，有助于构建更加包容和友好的Web环境。

二、`prefers-reduced-motion`的基本语法与取值

prefers-reduced-motion是一个CSS媒体特性，用于检测用户是否在其设备上启用了最小化非必要运动的设置。它遵循媒体查询的语法规则，可以在CSS和JavaScript上下文中进行检查。

1. 基本语法

在CSS中，prefers-reduced-motion媒体查询的基本语法如下：

@media(prefers-reduced-motion:reduce){/* 样式规则 */}

当用户已设置操作系统偏好以减少动画时，上述媒体查询内的样式规则将被应用。反之，如果用户未做出任何偏好设置或偏好完整动画，则这些规则将被忽略。

2. 取值说明

prefers-reduced-motion可以接受两个可能的值：

no-preference：表示用户在底层操作系统中未做出任何偏好设置。此关键字值在布尔上下文中评估为false。当媒体查询为@media (prefers-reduced-motion: no-preference)时，其中的样式规则仅在用户未请求减少动画时应用。
reduce：表示用户已设置操作系统偏好，指示界面应最大限度地减少移动或动画，最好达到移除所有非必要移动的程度。此关键字值在布尔上下文中评估为true。当媒体查询为@media (prefers-reduced-motion: reduce)时，其中的样式规则将在用户请求减少动画时应用。

值得注意的是，@media (prefers-reduced-motion)是@media (prefers-reduced-motion: reduce)的简写形式，两者在功能上是等价的。

三、`prefers-reduced-motion`在CSS中的应用

在CSS中，prefers-reduced-motion媒体查询可以用于控制动画、过渡和其他运动效果的显示。通过为偏好减少动画的用户定义不同的样式规则，开发者可以确保这些用户在使用网站时不会感到不适。

1. 禁用动画效果

对于某些用户来说，即使是最简单的动画也可能引发不适。因此，为这些用户禁用所有动画效果是一个明智的选择。以下是一个示例，展示了如何使用prefers-reduced-motion媒体查询来禁用动画：

.animated-element{animation:aniName 5s infinite linear;}@media(prefers-reduced-motion:reduce){.animated-element{animation:none;}}

在上述示例中，.animated-element类原本应用了一个名为aniName的动画，该动画将持续5秒并无限循环。然而，当用户请求减少动画时（即prefers-reduced-motion: reduce），.animated-element的动画将被禁用（animation: none），从而避免了可能引发不适的运动效果。

2. 替换动画效果

除了完全禁用动画外，开发者还可以为偏好减少动画的用户提供替代的、更加柔和的动画效果。例如，可以将一个快速闪烁的动画替换为一个渐变消失的动画，以减少对用户的视觉冲击。以下是一个示例：

.flashing-element{animation:flash 1s infinite alternate;}@media(prefers-reduced-motion:reduce){.flashing-element{animation:fadeOut 2s forwards;}}

在上述示例中，.flashing-element类原本应用了一个名为flash的动画，该动画会在1秒内快速闪烁并无限循环。然而，当用户请求减少动画时，.flashing-element的动画将被替换为一个名为fadeOut的渐变消失动画，该动画将在2秒内完成并保持最终状态（forwards），从而提供了更加柔和的视觉效果。

四、`prefers-reduced-motion`在JavaScript中的应用

除了CSS外，prefers-reduced-motion媒体查询还可以在JavaScript中进行检查，以便根据用户的动画偏好执行不同的逻辑。这可以通过window.matchMedia()方法实现，该方法返回一个MediaQueryList对象，该对象表示指定的媒体查询字符串的结果。

1. 检查动画偏好

以下是一个示例，展示了如何在JavaScript中检查用户的动画偏好：

constprefersReducedMotion=window.matchMedia('(prefers-reduced-motion: reduce)').matches;if(prefersReducedMotion){// 用户请求减少动画，执行相应的逻辑console.log('用户偏好减少动画');// 例如，禁用自动播放视频、调整动画速度等}else{// 用户未请求减少动画，执行默认逻辑console.log('用户未偏好减少动画');// 例如，播放动画、启用自动播放视频等}

在上述示例中，window.matchMedia('(prefers-reduced-motion: reduce)').matches用于检查用户是否已请求减少动画。如果返回true，则表示用户偏好减少动画；如果返回false，则表示用户未偏好减少动画。根据检查结果，开发者可以执行不同的逻辑，如禁用自动播放视频、调整动画速度等。

2. 监听动画偏好变化

除了初始检查外，开发者还可以监听用户动画偏好的变化，以便在用户更改设置时及时调整网站的行为。这可以通过监听MediaQueryList对象的change事件实现。以下是一个示例：

constmediaQuery=window.matchMedia('(prefers-reduced-motion: reduce)');functionhandleMotionChange(e){if(e.matches){// 用户现在偏好减少动画console.log('用户现在偏好减少动画');// 执行相应的逻辑}else{// 用户现在未偏好减少动画console.log('用户现在未偏好减少动画');// 执行默认逻辑}}// 初始检查handleMotionChange(mediaQuery);// 监听变化mediaQuery.addListener(handleMotionChange);

在上述示例中，window.matchMedia('(prefers-reduced-motion: reduce)')用于创建一个MediaQueryList对象，该对象表示用户是否偏好减少动画的媒体查询。handleMotionChange函数用于处理动画偏好的变化，根据检查结果执行不同的逻辑。通过调用mediaQuery.addListener(handleMotionChange)，开发者可以监听用户动画偏好的变化，并在变化发生时调用handleMotionChange函数进行相应处理。

五、浏览器支持与兼容性

prefers-reduced-motion媒体查询自2020年1月起已得到所有主流浏览器的支持，包括Chrome、Firefox、Safari和Edge等。这意味着开发者可以放心地在项目中使用这一特性，而无需担心兼容性问题。然而，为了确保最佳的用户体验，开发者仍应进行充分的测试，以验证在不同浏览器和设备上的表现。

六、实际应用案例与最佳实践

1. 实际应用案例

许多知名网站已经采用了prefers-reduced-motion媒体查询来提升可访问性。例如，GitHub在其代码编辑器中提供了减少动画的选项，允许用户根据个人偏好调整动画效果。这一特性对于患有前庭运动障碍的用户来说尤为重要，因为他们可以在不牺牲功能性的前提下享受更加舒适的浏览体验。

2. 最佳实践

尊重用户偏好：始终将用户的偏好放在首位。如果用户请求减少动画，则应尽可能地禁用或替换所有非必要的动画效果。
提供替代方案：对于必须使用动画的场景（如加载指示器），提供替代的、更加柔和的动画效果或静态指示器，以确保所有用户都能获得良好的体验。
测试与验证：在不同浏览器和设备上测试网站的行为，确保prefers-reduced-motion媒体查询能够正确地检测用户的偏好并应用相应的样式规则。
教育用户：在网站的辅助功能设置或无障碍声明中提及prefers-reduced-motion媒体查询的使用情况，教育用户如何在其操作系统中设置动画偏好以获得更好的体验。

减少运动偏好：prefers-reduced-motion媒体查询详解