prefers-reduced-motion media query dùng khi nào?

Tôn trọng accessibility settings của user muốn giảm animations. Quan trọng cho users có vestibular disorders (chuyển động mạnh gây buồn nôn).

Best practice: dùng no-preference guard thay vì cắt toàn bộ animations:

@media (prefers-reduced-motion: no-preference) {
  .animated { animation: slideIn 0.3s ease; }
}

Hoặc giảm thay vì xóa hoàn toàn: animation-duration: 0.001ms để giữ logic nhưng không có visual motion.

Tránh pattern * { animation: none } quá aggressive — có thể ảnh hưởng UX cần thiết.

Respects accessibility settings for users who prefer reduced motion. Critical for users with vestibular disorders (strong motion can cause nausea).

Best practice: use the no-preference guard instead of cutting all animations:

@media (prefers-reduced-motion: no-preference) {
  .animated { animation: slideIn 0.3s ease; }
}

Alternatively, reduce rather than remove: animation-duration: 0.001ms preserves animation logic without visual motion.

Avoid the overly aggressive * { animation: none } pattern — it can break necessary UX.