prefers-reduced-motion: گاهی اوقات حرکت کمتر بیشتر است

پرس و جوی رسانه ترجیحا کاهش حرکت تشخیص می دهد که آیا کاربر از سیستم عامل درخواست کرده است تا میزان انیمیشن یا حرکتی را که استفاده می کند به حداقل برساند.

Thomas Steiner

همه انیمیشن‌های تزئینی یا انتقال‌ها را دوست ندارند، و برخی از کاربران در مواجهه با اسکرول اختلاف منظر، جلوه‌های زوم و غیره کاملاً دچار بیماری حرکت می‌شوند. جستجوی رسانه ترجیحی کاربر prefers-reduced-motion به شما امکان می دهد یک نوع کاهش حرکت سایت خود را برای کاربرانی که این اولویت را بیان کرده اند طراحی کنید.

حرکت بیش از حد در زندگی واقعی و در وب

روز قبل با بچه هایم مشغول اسکیت روی یخ بودم. روز دوست داشتنی بود، خورشید می درخشید و پیست یخ مملو از مردم بود ⛸. تنها مشکل این است: من به خوبی با شلوغی کنار نمی‌آیم. با این همه هدف متحرک، نمی‌توانم روی چیزی تمرکز کنم، و در نهایت گم می‌شوم و با احساس بار اضافی بصری کامل مواجه می‌شوم، تقریباً مانند خیره شدن به یک لانه مورچه‌ها.

گاهی اوقات، همین اتفاق ممکن است در وب بیفتد: با تبلیغات چشمک زن، جلوه های اختلاف منظر فانتزی، انیمیشن های آشکار غافلگیرکننده، پخش خودکار ویدیوها، و غیره، وب گاهی اوقات می تواند کاملاً طاقت فرسا باشد ... خوشبختانه، برخلاف زندگی واقعی، راه حلی برای آن وجود دارد. . پرس و جو رسانه CSS prefers-reduced-motion به توسعه دهندگان این امکان را می دهد که برای کاربرانی که حرکت کاهش یافته را ترجیح می دهند، یک نوع صفحه ایجاد کنند. این می‌تواند شامل هر چیزی از خودداری از پخش خودکار ویدیوها تا غیرفعال کردن برخی جلوه‌های صرفاً تزئینی و طراحی مجدد صفحه برای کاربران خاص باشد.

قبل از اینکه به این ویژگی بپردازم، بیایید یک قدم به عقب برگردیم و به این فکر کنیم که انیمیشن ها برای چه چیزی در وب استفاده می شوند. در صورت تمایل، می‌توانید از اطلاعات پس‌زمینه صرفنظر کرده و مستقیماً به جزئیات فنی زیر بروید .

انیمیشن در وب

انیمیشن اغلب برای ارائه بازخورد به کاربر استفاده می شود، به عنوان مثال، به آنها اطلاع می دهد که یک عمل دریافت شده و در حال پردازش است. به عنوان مثال، در یک وب‌سایت خرید، یک محصول می‌تواند متحرک شود تا به یک سبد خرید مجازی «پرواز» کند، که به‌عنوان نمادی در گوشه سمت راست بالای سایت نشان داده می‌شود.

مورد استفاده دیگر شامل استفاده از حرکت برای هک کردن ادراک کاربر با استفاده از ترکیبی از صفحه‌های اسکلت، ابرداده‌های متنی و پیش‌نمایش‌های تصویر با کیفیت پایین است تا زمان زیادی را به کاربر اختصاص دهد و کل تجربه را سریع‌تر کند. ایده این است که زمینه را به کاربر از آنچه در راه است داده شود و در عین حال چیزها را در سریع ترین زمان ممکن بارگذاری کند.

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

اختلال طیف دهلیزی ناشی از حرکت

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

حذف حرکت در سیستم عامل ها

بسیاری از سیستم عامل ها برای مدت طولانی تنظیمات دسترسی را برای تعیین اولویت برای کاهش حرکت دارند. اسکرین شات‌های زیر اولویت‌های Reduce motion macOS Mojave و ترجیح انیمیشن‌های Android Pie Remove را نشان می‌دهند. هنگامی که علامت زده می شود، این تنظیمات برگزیده باعث می شود که سیستم عامل از جلوه های تزئینی مانند انیمیشن های راه اندازی برنامه استفاده نکند. خود برنامه‌ها می‌توانند و باید این تنظیمات را نیز رعایت کنند و همه انیمیشن‌های غیرضروری را حذف کنند.

حذف حرکت در وب

Media Queries سطح 5 ترجیحات کاربر با حرکت کاهش یافته را نیز به وب می آورد. پرسش‌های رسانه به نویسندگان اجازه می‌دهد تا مقادیر یا ویژگی‌های عامل کاربر یا دستگاه را مستقل از سندی که ارائه می‌شود، آزمایش و پرس و جو کنند. پرس و جو رسانه prefers-reduced-motion برای تشخیص اینکه آیا کاربر ترجیحات سیستم عاملی را برای به حداقل رساندن میزان انیمیشن یا حرکتی که استفاده می کند تنظیم کرده است استفاده می شود. می تواند دو مقدار ممکن را بگیرد:

• no-preference : نشان می دهد که کاربر هیچ اولویتی در سیستم عامل اصلی نداشته است. این مقدار کلمه کلیدی در زمینه بولی false ارزیابی می شود.
• reduce : نشان می دهد که کاربر یک اولویت سیستم عامل را تنظیم کرده است که نشان می دهد رابط ها باید حرکت یا انیمیشن را به حداقل برسانند، ترجیحاً تا جایی که تمام حرکات غیر ضروری حذف شوند.

کار با پرس و جو رسانه از زمینه های CSS و جاوا اسکریپت

مانند تمام پرس و جوهای رسانه ای، prefers-reduced-motion را می توان از یک زمینه CSS و از یک زمینه جاوا اسکریپت بررسی کرد.

برای نشان دادن هر دو، فرض کنید یک دکمه ثبت نام مهم دارم که می‌خواهم کاربر روی آن کلیک کند. من می‌توانم یک انیمیشن «ارتعاشی» جذاب تعریف کنم، اما به‌عنوان یک شهروند وب خوب، آن را فقط برای آن دسته از کاربرانی پخش می‌کنم که صراحتاً با انیمیشن‌ها موافق هستند، اما نه همه افراد دیگر، که می‌توانند کاربرانی باشند که از انیمیشن‌ها انصراف داده‌اند، یا کاربران در مرورگرهایی که پرس و جو رسانه را درک نمی کنند.

/*
  If the user has expressed their preference for
  reduced motion, then don't use animations on buttons.
*/
@media (prefers-reduced-motion: reduce) {
  button {
    animation: none;
  }
}

/*
  If the browser understands the media query and the user
  explicitly hasn't set a preference, then use animations on buttons.
*/
@media (prefers-reduced-motion: no-preference) {
  button {
    /* `vibrate` keyframes are defined elsewhere */
    animation: vibrate 0.3s linear infinite both;
  }
}

برای نشان دادن نحوه کار با prefers-reduced-motion با جاوا اسکریپت، بیایید تصور کنیم که یک انیمیشن پیچیده را با Web Animations API تعریف کرده‌ام. در حالی که قوانین CSS زمانی که تنظیمات برگزیده کاربر تغییر می کند به صورت پویا توسط مرورگر فعال می شوند، برای انیمیشن های جاوا اسکریپت باید خودم به تغییرات گوش دهم و سپس به صورت دستی انیمیشن های احتمالی در پرواز خود را متوقف کنم (یا اگر کاربر به من اجازه دهد آنها را دوباره راه اندازی کنم):

const mediaQuery = window.matchMedia('(prefers-reduced-motion: reduce)');
mediaQuery.addEventListener('change', () => {
  console.log(mediaQuery.media, mediaQuery.matches);
  // Stop JavaScript-based animations.
});

توجه داشته باشید که پرانتز در اطراف درخواست رسانه واقعی الزامی است:

window.matchMedia('prefers-reduced-motion: reduce');

window.matchMedia('(prefers-reduced-motion: reduce)');

کار با پرس و جو رسانه از زمینه های <picture>

یک مورد استفاده جالب این است که پخش یک AVIF، WebP یا GIF متحرک را به ویژگی media وابسته کنیم. اگر (prefers-reduced-motion: no-preference) true ارزیابی شود، نمایش نسخه متحرک بی خطر است، در غیر این صورت نسخه ثابت:

<picture>
  <!-- Animated versions. -->
  <source
    srcset="nyancat.avifs"
    type="image/avif"
    media="(prefers-reduced-motion: no-preference)"
  />
  <source
    srcset="nyancat.gif"
    type="image/gif"
    media="(prefers-reduced-motion: no-preference)"
  />
  <!-- Static versions. -->
  <img src="nyancat.png" alt="Nyan cat" width="250" height="250" />
</picture>

نمونه زیر را می توانید ببینید. سعی کنید تنظیمات برگزیده حرکت دستگاهتان را تغییر دهید تا تفاوت را ببینید.

در زمان درخواست، تنظیمات برگزیده کاربر را کشف کنید

هدر راهنمایی مشتری Sec-CH-Prefers-Reduced-Motion به سایت ها اجازه می دهد تا تنظیمات برگزیده حرکت کاربر را به صورت اختیاری در زمان درخواست به دست آورند، و به سرورها اجازه می دهد تا CSS مناسب را به دلایل عملکردی درون خطی کنند.

نسخه ی نمایشی

من یک نسخه نمایشی کوچک بر اساس گربه های وضعیت HTTP شگفت انگیز روجریو ویسنته ایجاد کرده ام. اول، یک لحظه از شوخی قدردانی کنید، خنده دار است و من صبر می کنم. حالا که برگشتید، اجازه دهید نسخه نمایشی را معرفی کنم. وقتی به پایین اسکرول می کنید، هر گربه وضعیت HTTP به طور متناوب از سمت راست یا چپ ظاهر می شود. این یک انیمیشن نرم 60 فریم در ثانیه است، اما همانطور که در بالا ذکر شد، برخی از کاربران ممکن است آن را دوست نداشته باشند یا حتی از حرکت بیمار رنج ببرند، بنابراین دمو به گونه‌ای برنامه‌ریزی شده است که prefers-reduced-motion . این حتی به صورت پویا کار می کند، بنابراین کاربران می توانند ترجیحات خود را در لحظه تغییر دهند، بدون نیاز به بارگیری مجدد. اگر کاربر حرکت کاهش‌یافته را ترجیح می‌دهد، انیمیشن‌های آشکار غیرضروری از بین می‌روند و فقط حرکت معمولی پیمایش باقی می‌ماند. اسکرین‌کست زیر دمو را در عمل نشان می‌دهد:

نتیجه گیری

احترام به اولویت‌های کاربر برای وب‌سایت‌های مدرن کلیدی است، و مرورگرها ویژگی‌های بیشتری را در اختیار توسعه‌دهندگان وب قرار می‌دهند تا این کار را انجام دهند. نمونه راه‌اندازی دیگر prefers-color-scheme است که تشخیص می‌دهد کاربر طرح رنگی روشن یا تیره را ترجیح می‌دهد. شما می توانید همه چیز در مورد prefers-color-scheme در مقاله من سلام تاریکی، دوست قدیمی من بخوانید.

گروه کاری CSS در حال حاضر در حال استانداردسازی بیشتر درخواست‌های رسانه ترجیحی کاربر مانند prefers-reduced-transparency (تشخیص می‌دهد اگر کاربر شفافیت کاهش یافته را ترجیح می‌دهد)، prefers-contrast (تشخیص می‌دهد که آیا کاربر از سیستم درخواست کرده است میزان کنتراست بین مجاور را افزایش یا کاهش دهد. رنگ ها)، و inverted-colors (تشخیص می دهد که آیا کاربر رنگ های معکوس را ترجیح می دهد).

(پاداش) کاهش حرکت اجباری در تمام وب سایت ها

هر سایتی از prefers-reduced-motion استفاده نمی کند، یا شاید به اندازه کافی برای سلیقه شما کافی نباشد. اگر به هر دلیلی می خواهید حرکت را در تمام وب سایت ها متوقف کنید، در واقع می توانید. یکی از راه های تحقق این امر این است که به هر صفحه وب که بازدید می کنید، یک stylesheet با CSS زیر تزریق کنید. چندین افزونه مرورگر وجود دارد (با مسئولیت خود استفاده کنید!) که این امکان را فراهم می کند.

@media (prefers-reduced-motion: reduce) {
  *,
  ::before,
  ::after {
    animation-delay: -1ms !important;
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    background-attachment: initial !important;
    scroll-behavior: auto !important;
    transition-duration: 1ms !important;
    transition-delay: 1ms !important;
  }
}

روش کار به این صورت است که CSS بالا مدت زمان همه انیمیشن‌ها را لغو می‌کند و به زمان کوتاهی منتقل می‌شود که دیگر قابل توجه نیستند. از آنجایی که برخی از وب سایت ها برای درست کار کردن به یک انیمیشن وابسته هستند که باید اجرا شود (شاید به این دلیل که یک مرحله خاص بستگی به شلیک رویداد animationend دارد)، animation: none !important; رویکرد کار نخواهد کرد حتی هک فوق تضمینی برای موفقیت در همه وب‌سایت‌ها نیست (به عنوان مثال، نمی‌تواند حرکتی را که از طریق Web Animations API آغاز شده است متوقف کند)، بنابراین هنگام مشاهده شکستگی، حتماً آن را غیرفعال کنید.

لینک های مربوطه

• آخرین پیش نویس ویراستار از مشخصات پرس و جوهای رسانه سطح 5 .
• prefers-reduced-motion on Chrome Platform Status .
• باگ Chromium prefers-reduced-motion .
• پلک زدن قصد پیاده سازی پست کردن .

سپاسگزاریها

فریاد انبوه به استفن مک گروئر که prefers-reduced-motion در کروم پیاده سازی کرده است و - همراه با راب دادسون - این مقاله را نیز بررسی کرده است. تصویر قهرمان توسط Hannah Cauhepe در Unsplash.