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

يكتشف استعلام وسائط "تفضيل الحركة" ما إذا كان المستخدم قد طلب من نظام التشغيل تقليل مقدار الرسوم المتحركة أو الحركة التي يستخدمها.

توماس شتاينر

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

التوافق مع المتصفح

  • 74
  • 79
  • 63
  • 10.1

المصدر

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

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

مجموعة كبيرة من الأشخاص الذين يتزلجون على الجليد.
الحمل المرئي الزائد في الحياة الواقعية.

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

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

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

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

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

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

اضطراب الطيف الدهليئي التحفيزي للحركة

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

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

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

لقطة شاشة لشاشة إعدادات نظام التشغيل macOS مع وضع علامة في مربّع الاختيار "تقليل الحركة"
لقطة شاشة لشاشة إعدادات Android تم وضع علامة في مربّع الاختيار "إزالة الصور المتحركة" فيها

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

يقدّم المستوى 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 بنفسي بالنسبة إلى صور 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-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)، لذا احرص على إيقاف الميزة عندما تلاحظ تعطُّلها.

شكر وتقدير

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