کاهش حرکت با CSS؛ احترام به prefers-reduced-motion
هدف: حرکت تزئینی کارت را برای کاربری که کاهش حرکت را در سیستم انتخاب کرده خاموش کنی، بدون اینکه محتوا یا عمل اصلی حذف شود.
یک کارت آزمایشی با کلاس card بساز و کد پایه را اضافه کن تا در حالت hover هشت پیکسل بالا برود.
صفحه را با تنظیم عادی سیستم باز کن و حرکت را با ماوس یا ابزار شبیه‌سازی مرورگر بررسی کن.
قانون prefers-reduced-motion: reduce را از نمونه اضافه کن؛ این media query ترجیح کاربر را می‌خواند.
در حالت کاهش حرکت، transform را حذف و مدت transition را تقریباً صفر کن؛ دکمه و متن کارت باید همچنان کار کنند.
در ابزار توسعه، ویژگی Emulate CSS media feature prefers-reduced-motion را روی reduce بگذار.
روی کارت برو؛ نباید جابه‌جایی محسوس داشته باشد، اما رنگ فوکوس و قابلیت کلیک نباید ناپدید شوند.
شبیه‌سازی را به no-preference برگردان و دوباره آزمون کن؛ نسخهٔ عادی باید حرکت کوتاه اولیه را نشان دهد.
اگر انیمیشن اطلاعات ضروری منتقل می‌کند، همان اطلاعات را با متن یا تغییر حالت پایدار هم ارائه کن.
انیمیشن خودکار طولانی را فقط کند نکن؛ امکان توقف یا حذف حرکت غیرضروری را بر اساس نیاز واقعی طراحی بررسی کن.
آزمون صفحه‌کلید را انجام بده و مطمئن شو focus-visible مستقل از hover دیده می‌شود.
معیار موفقیت: با reduce هیچ حرکت تزئینی محسوس نباشد و با هر دو حالت، محتوا و اقدام اصلی قابل استفاده بماند.
کد کامل تمرین
.card { transition: transform .35s ease; }
.card:hover { transform: translateY(-8px); }
@media (prefers-reduced-motion: reduce) {
.card { transition-duration: .01ms; }
.card:hover { transform: none; }
}
0 دیدگاه برای کاهش حرکت با CSS؛ احترام به prefers-reduced-motion
اگر تجربه یا پرسشی دارید، همین‌جا برای ما بنویسید.