CSS prefers-reduced-motion Media Query

当我开始从事web开发行业时，媒体查询是有限的——screen和print是我最常使用的两个媒体查询。十多年后，媒体查询已经发展到各种屏幕单元，功能检查，甚至配色方案偏好。我很高兴看到CSS超越了令人难以置信的通用设置。

我最近发现的一个CSS媒体查询是更喜欢减少运动，这是一个针对对过度运动敏感的用户的媒体查询。

让我们使用偏好减少运动来向所有用户显示运动，但不向敏感用户显示运动：

.animation {
  animation: vibrate 0.2s; 
}

@media (prefers-reduced-motion: reduce) {
  .animation {
    animation: none;
  }
}

上面的例子说明了我们如何通过不为那些说他们不想要的元素设置动画来迎合敏感用户。

令人惊讶的是，像这样的媒体查询能够真正向用户展示你的关心。当然，我们喜欢这种花哨的炫技，但并不是每个人都能驾驭这种动作。