یک مدیا کوئری خاص در CSS

آخرین به‌روزرسانی: ۲۷ تیر ۱۴۰۴

به عنوان یه طراح وب، شما باید خیلی چیزها از کاربر بدونید تا بتونید بهترین تجربه کاربری رو براش ایجاد کنید. چند روز پیش داشتم یه مقاله‌ای می‌خوندم که واقعاً لذت بردم این خارجی‌ها، به چه جزییات ظریفی تو کارهاشون دقت می‌کنند و سعی می‌کنند اون حس خوب استفاده از یک سایت رو برای اکثریت کاربران فراهم کنند.

قضیه از این قراره که یه عده از آدمها به دلایل مختلف دچار یه اختلالی هستند به اسم اختلال دهلیزی گوش درونی (vestibular motion disorders) که منجر میشه تحت شرایط خاصی، علایمی مثل سرگیجه، تهوع و سوسو زدن چشم رو تجربه کنند.

حالا شاید بپرسید چه ربطی به طراحی وب داره؟ مسأله اینجاست که افرادی با این اختلال، وقتی صفحات وب با انیمیشن زیاد رو می‌بینند همون مشکلات که بالا گفته شد رو پیدا می‌کنند؛ خصوصاً انیمیشن‌هایی که یه المان سایزش مدام تغییر می‌کنه (مث پالس زدن).

به عنوان طراح وب باید چه کنیم؟ در طراحی صفحات وب برای این که چنین افرادی به مشکل برنخورند، باید از مدیا کوئری استفاده کنیم. یه حالت خاص مدیا کوئری داریم برای حذف انیمیشن‌های مزاحم این افراد!!!

@media (prefers-reduced-motion) {
/* استایل‌هایی که انیمیشن مزاحمشون حذف شده */
}

برچسب‌ها: -

مشاوره رایگان

علاقمند به یادگیری طراحی سایت یا دنبال مشاوره در این زمینه هستی؟