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

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

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.
• وميض نية تنفيذ عملية النشر:

شكر وتقدير

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