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

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

Thomas Steiner

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

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

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

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

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

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

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

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

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

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

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

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

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

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

يقدّم المستوى 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 المناسب لأسباب تتعلّق بالأداء.

عرض توضيحي

لقد أنشأت عرضًا توضيحيًا صغيرًا استنادًا إلى رمز Rogério Vicente الرائع 🐈 HTTP status cats. أولاً، ننصحك بالضحك على النكتة، فهي مضحكة، وسننتظرك. الآن بعد عودتك، دعوني أقدّم لكم العرض التوضيحي. عند الانتقال للأعلى أو للأسفل، تظهر كل فئة من فئات حالة HTTP بشكل متناوب من اليمين أو اليسار. إنّه رسوم متحركة سلسة بمعدل 60 لقطة في الثانية، ولكن كما هو موضّح سابقًا، قد لا يعجب بعض المستخدمين هذا التأثير أو قد يسبب لهم دوارًا في الحركة، لذلك تمّت برمجة التأثير التمهيدي لاحترام prefers-reduced-motion. ويعمل هذا الإجراء بشكل ديناميكي، ما يتيح للمستخدمين تغيير إعداداتهم المفضّلة أثناء التنقل بدون الحاجة إلى إعادة التحميل. إذا كان المستخدم يفضل الحركة المخفّضة، ستختفي رسوم الكشف غير الضرورية، وتترك فقط حركة التمرير المنتظمة. يعرض تسجيل الشاشة التالي الإصدار التجريبي أثناء التشغيل:

الاستنتاجات

إنّ مراعاة الإعدادات المفضّلة للمستخدمين هو أمر أساسي في المواقع الإلكترونية الحديثة، وتقدّم المتصفّحات المزيد والمزيد من الميزات لتمكين مطوّري الويب من ذلك. ومن الأمثلة الأخرى التي تم إطلاقها هو prefers-color-scheme، الذي يرصد ما إذا كان المستخدم يفضّل استخدام مخطط ألوان فاتح أو داكن. يمكنك الاطّلاع على كل المعلومات حول prefers-color-scheme في مقالتي مرحبًا يا ظلام، يا صديقي القديم 🌒.

تعمل مجموعة عمل CSS على توحيد المزيد من طلبات البحث عن الوسائط حسب إعدادات المستخدم المفضّلة، مثل 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)، لذا احرص على إيقافها عند ملاحظة أي مشكلة.

روابط ذات صلة

• أحدث نسخة من مسودة المحرّر لمواصفات Media Queries Level 5
• prefers-reduced-motion على حالة النظام الأساسي Chrome.
• prefers-reduced-motion خطأ في Chromium:
• انقر على Intent to Implement posting (الموافقة على نشر المحتوى).

الشكر والتقدير

نشكر ستيفن ماكغروير الذي نفَّذ prefers-reduced-motion في Chrome وراجع هذا المستند أيضًا مع روب دوسن. الصورة الرئيسية من إنشاء "هانا كاوهيبي" على Unsplash