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

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

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

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

روابط ذات صلة

• أحدث مسودة للمحرِّر لمواصفات طلبات البحث عن الوسائط من المستوى 5
• prefers-reduced-motion على حالة النظام الأساسي Chrome.
• prefers-reduced-motion خطأ Chromium.
• Blink نية تنفيذ عملية النشر

شكر وتقدير

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