يفضل الحركة الأقل: في بعض الأحيان تكون الحركة الأقل أكثر

تكتشف طلب الوسائط prefers-reduced-motion ما إذا كان المستخدم قد طلب من نظام التشغيل تقليل مقدار الصور المتحركة أو الحركة التي يستخدمها.

Thomas Steiner

لا يفضّل بعض المستخدمين الصور المتحركة أو الانتقالات الزخرفية، بل إنّ البعض الآخر يشعرون بالغثيان عند التصفّح بتأثير المنظر المجسّم أو عند تكبير الصور وتصغيرها وغير ذلك. يتيح لك طلب البحث عن الوسائط حسب إعدادات المستخدم المفضّلة prefers-reduced-motion تصميم نسخة من موقعك الإلكتروني تتضمّن حركة أقل للمستخدمين الذين عبّروا عن هذا الإعداد المفضّل.

الحركة المفرطة في الحياة الواقعية وعلى الويب

في أحد الأيام، كنت أتزلّج على الجليد مع أطفالي. كان يومًا جميلاً، كانت الشمس مشرقة، وكان حلبة التزلج مزدحمة بالناس ⛸. المشكلة الوحيدة هي أنّني لا أستطيع التعامل مع الحشود بشكل جيد. مع وجود الكثير من الأهداف المتحركة، لا أستطيع التركيز على أي شيء، وينتهي بي الأمر مشتتًا ومُثقلًا بصريًا، وكأنني أنظر إلى تل نمل 🐜.

في بعض الأحيان، يحدث الأمر نفسه على الويب: من خلال الإعلانات الوامضة وتأثيرات المنظر المجسم الرائعة والرسوم المتحركة المفاجئة التي تكشف عن المحتوى والفيديوهات التي يتم تشغيلها تلقائيًا وغير ذلك، قد يكون الويب في بعض الأحيان مربكًا للغاية… لحسن الحظ، على عكس الحياة الواقعية، هناك حلّ لذلك. تتيح أداة طلب البحث عن الوسائط في CSS prefers-reduced-motion للمطوّرين إنشاء نسخة مختلفة من الصفحة للمستخدمين الذين يفضّلون تقليل الحركة. ويمكن أن يشمل ذلك أي شيء، بدءًا من الامتناع عن عرض فيديوهات يتم تشغيلها تلقائيًا، إلى إيقاف تأثيرات تزيينية معيّنة، وصولاً إلى إعادة تصميم صفحة بالكامل لبعض المستخدمين.

قبل أن أتحدّث عن هذه الميزة، سأعود خطوة إلى الوراء وأفكّر في الغرض من استخدام الرسوم المتحركة على الويب. يمكنك أيضًا تخطّي المعلومات الأساسية والانتقال مباشرةً إلى التفاصيل الفنية إذا أردت ذلك.

الصور المتحركة على الويب

يتم في كثير من الأحيان استخدام الرسوم المتحركة لتقديم ملاحظات للمستخدم، مثلاً لإعلامه بأنّه تم تلقّي إجراء ويجري تنفيذه. على سبيل المثال، على موقع إلكتروني للتسوّق، يمكن تحريك منتج ليظهر وكأنّه "يطير" إلى سلة تسوّق افتراضية، ويتم تمثيلها كرمز في الزاوية العلوية اليسرى من الموقع الإلكتروني.

تتضمّن حالة استخدام أخرى الاستعانة بالحركة من أجل التأثير في إدراك المستخدم من خلال استخدام مزيج من شاشات الهيكل والبيانات الوصفية السياقية ومعاينات الصور المنخفضة الجودة لشغل الكثير من وقت المستخدم وجعل التجربة بأكملها تبدو أسرع. الفكرة هي تقديم سياق للمستخدم حول ما سيظهر له، وفي الوقت نفسه تحميل المحتوى بأسرع ما يمكن.

أخيرًا، هناك تأثيرات تزيينية مثل التدرجات اللونية المتحركة والتمرير المنظوري والفيديوهات في الخلفية وغيرها. على الرغم من أنّ العديد من المستخدمين يستمتعون بهذه الرسوم المتحركة، يكرهها البعض لأنّها تشتّت انتباههم أو تبطئهم. في أسوأ الحالات، قد يعاني المستخدمون من دوار الحركة كما لو كانت تجربة حقيقية، لذا فإنّ تقليل الرسوم المتحركة بالنسبة إلى هؤلاء المستخدمين هو ضرورة طبية.

اضطراب طيف الدهليزي الناتج عن الحركة

يعاني بعض المستخدمين من تشتيت الانتباه أو الغثيان بسبب المحتوى المتحرّك. على سبيل المثال، يمكن أن تتسبّب الرسوم المتحركة الخاصة بالتمرير في حدوث اضطرابات دهليزية عندما تتحرّك العناصر الأخرى غير العنصر الرئيسي المرتبط بالتمرير كثيرًا. على سبيل المثال، يمكن أن تتسبّب الرسوم المتحركة التي تتضمّن تأثير المنظر المجسّم في حدوث اضطرابات في الدهليز لأنّ العناصر الخلفية تتحرّك بمعدّل مختلف عن العناصر الأمامية. تشمل ردود الفعل الناتجة عن اضطراب الدهليز (الأذن الداخلية) الدوخة والغثيان والصداع النصفي، وقد تتطلب أحيانًا الراحة في الفراش للتعافي.

إزالة الحركة على أنظمة التشغيل

تتضمّن العديد من أنظمة التشغيل إعدادات تسهيل الاستخدام لتحديد خيار تقليل الحركة منذ فترة طويلة. تعرض لقطات الشاشة التالية الإعداد تقليل الحركة في نظام التشغيل macOS Mojave والإعداد إزالة الصور المتحركة في نظام التشغيل Android Pie. عند وضع علامة في المربّع، تؤدي هذه الإعدادات المفضّلة إلى عدم استخدام نظام التشغيل لتأثيرات زخرفية، مثل الرسوم المتحركة عند تشغيل التطبيقات. يمكن للتطبيقات نفسها أن تلتزم بهذا الإعداد أيضًا، وعليها إزالة جميع الرسوم المتحركة غير الضرورية.

إزالة الحركة على الويب

تتيح استعلامات الوسائط المستوى 5 إمكانية ضبط الإعدادات المفضّلة بشأن تقليل الحركة على الويب أيضًا. تسمح طلبات البحث عن الوسائط للمؤلفين باختبار قيم أو ميزات وكيل المستخدم أو جهاز العرض والاستعلام عنها بشكل مستقل عن المستند الذي يتم عرضه. يتم استخدام طلب البحث عن الوسائط prefers-reduced-motion لاكتشاف ما إذا كان المستخدم قد ضبط إعدادات نظام التشغيل المفضّلة للحدّ من مقدار الرسوم المتحركة أو الحركة التي يستخدمها. يمكن أن تأخذ إحدى القيمتين المحتملتين التاليتين:

• ‫no-preference: يشير إلى أنّ المستخدم لم يحدّد أي إعدادات مفضّلة في نظام التشغيل الأساسي. يتم تقييم قيمة الكلمة الرئيسية هذه على أنّها false في سياق القيمة المنطقية.
• ‫reduce: تشير إلى أنّ المستخدم قد ضبط إعدادات نظام التشغيل المفضّلة للإشارة إلى أنّه يجب أن تقلّل الواجهات من الحركة أو الرسوم المتحركة، ويُفضّل أن يتم ذلك إلى الحد الذي تتم فيه إزالة كل الحركات غير الأساسية.

التعامل مع طلب البحث عن الوسائط من سياقات CSS وJavaScript

كما هو الحال مع جميع طلبات البحث عن الوسائط، يمكن التحقّق من prefers-reduced-motion من سياق CSS ومن سياق JavaScript.

لتوضيح كليهما، لنفترض أنّ لديّ زر تسجيل مهم أريد أن ينقر عليه المستخدم. يمكنني تحديد صورة متحركة "اهتزاز" تجذب الانتباه، ولكن بصفتي مواطنًا صالحًا على الويب، لن أعرضها إلا للمستخدمين الذين يوافقون صراحةً على الصور المتحركة، وليس للمستخدمين الآخرين، مثل المستخدمين الذين أوقفوا الصور المتحركة أو المستخدمين الذين يستخدمون متصفحات لا تفهم طلبات البحث عن الوسائط.

/*
  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 مع JavaScript، لنفترض أنّني حدّدت حركة معقّدة باستخدام Web Animations API. في حين أنّ قواعد CSS سيتم تفعيلها بشكل ديناميكي من خلال المتصفّح عند تغيير إعدادات المستخدم المفضّلة، عليّ الاستماع إلى التغييرات بنفسي بالنسبة إلى الرسوم المتحركة في JavaScript، ثم إيقاف الرسوم المتحركة التي قد تكون قيد التنفيذ (أو إعادة تشغيلها إذا سمح لي المستخدم بذلك):

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 في مقالتي Hello Darkness, My Old Friend 🌒.

تعمل مجموعة CSS Working Group على توحيد المزيد من طلبات البحث عن الوسائط المتعلقة بإعدادات المستخدمين المفضّلة، مثل prefers-reduced-transparency (التي ترصد ما إذا كان المستخدم يفضّل تقليل الشفافية)، prefers-contrast (التي ترصد ما إذا كان المستخدم قد طلب من النظام زيادة أو تقليل مقدار التباين بين الألوان المتجاورة)، وinverted-colors (التي ترصد ما إذا كان المستخدم يفضّل عكس الألوان).

(ميزة إضافية) فرض الحدّ من الحركة على جميع المواقع الإلكترونية

لن تستخدم بعض المواقع الإلكترونية prefers-reduced-motion، أو ربما لن تستخدمها بشكل كافٍ بالنسبة إلى ذوقك. إذا أردت إيقاف الحركة على جميع المواقع الإلكترونية لأي سبب كان، يمكنك إجراء ذلك. إحدى طرق تحقيق ذلك هي إدخال ورقة أنماط تتضمّن 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 على حالة النظام الأساسي Chrome.
• prefers-reduced-motion خطأ في Chromium
• ‫Blink Intent to Implement posting

الإقرارات

نشكر ستيفن ماكروير الذي نفّذ prefers-reduced-motion في Chrome، كما نشكر روب دودسون الذي راجع هذا المستند مع ستيفن.