CSS prefers-reduced-motion Media Query

Quando comecei no setor de desenvolvimento da Web, as consultas de mídia eram limitadas. screen e print eram as duas consultas de mídia que eu usava com mais frequência. Mais de uma década depois, as consultas de mídia avançaram para várias unidades de tela, verificação de recursose até mesmo preferência de esquema de cores. Estou muito feliz por ver o CSS evoluir para além de configurações incrivelmente genéricas.

Uma das media queries do CSS que descobri recentemente é a prefers-reduced-motion, uma consulta de mídia para usuários sensíveis a movimentos excessivos.

Vamos usar prefers-reduced-motion para mostrar movimento a todos os usuários, mas nenhum a usuários sensíveis:

.animation {
  animation: vibrate 0.2s; 
}

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

O exemplo acima ilustra como podemos atender a usuários sensíveis, não animando elementos para aqueles que disseram que não os querem.

É incrível como consultas de mídia como essa podem realmente mostrar aos usuários que o senhor se importa. É claro que adoramos a fantasia, mas nem todos conseguem lidar com esse movimento.