Frontend Academy · درس

احترام prefers-reduced-motion

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

الدرس 4 من 413 خطوة

احترام prefers-reduced-motion درس مجاني في Frontend Academy على CoddyKit. هذا هو الدرس 4 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في Frontend Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة Frontend Academy 4 دروس في المجموع.

ميزة الوسائط prefers-reduced-motion

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

اكتشاف تقليل الحركة في CSS

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

/* Apply animation by default */
.spinner {
  animation: spin 1s linear infinite;
}

/* Disable for users who want less motion */
@media (prefers-reduced-motion: reduce) {
  .spinner {
    animation: none;
  }
}

مبدأ «التقليل لا الإلغاء»

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

@media (prefers-reduced-motion: reduce) {
  .modal {
    /* Replace scale + fade with just fade */
    animation: fadeOnly 0.1s linear;
  }
  @keyframes fadeOnly {
    from { opacity: 0; }
    to   { opacity: 1; }
  }
}

الخيار الجذري: تعطيل جميع الرسوم المتحركة

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

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

اكتشاف تقليل الحركة في JavaScript

استخدموا واجهة matchMedia لاكتشاف التفضيل في JavaScript — وهذا مفيد للتحكم في الرسوم المتحركة على canvas، أو الحركة التي يديرها JavaScript، أو التشغيل التلقائي للفيديو.

const prefersReduced = window.matchMedia('(prefers-reduced-motion: reduce)');

if (prefersReduced.matches) {
  // skip gsap or canvas animations
} else {
  startAnimation();
}

// React to preference changes:
prefersReduced.addEventListener('change', (e) => {
  if (e.matches) stopAnimations();
  else startAnimations();
});

سلوك التمرير والتشغيل التلقائي

عطّلوا أيضًا التمرير السلس للمستخدمين الذين يفضّلون تقليل الحركة: scroll-behavior: auto. أوقفوا تشغيل الفيديوهات تلقائيًا. ولا تعرضوا محتوى يومض أو يتناوب ضوؤه بسرعة.

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

// In JS:
if (!prefersReduced.matches) {
  element.scrollIntoView({ behavior: 'smooth' });
} else {
  element.scrollIntoView(); // instant
}

WCAG 2.3.3 — الرسوم المتحركة الناتجة عن التفاعلات

يشترط WCAG 2.3.3 (المستوى AAA) إمكانية تعطيل الحركة الناتجة عن تفاعل المستخدم. وباحترام prefers-reduced-motion، تستوفون هذا المعيار وتحسّنون إمكانية الوصول للمستخدمين الذين يعانون من اضطرابات دهليزية.

اختبار تقليل الحركة

في Chrome DevTools: افتحوا لوحة العرض (قائمة النقاط الثلاث → More tools → Rendering)، ثم فعّلوا 'Emulate CSS media feature prefers-reduced-motion'. اختبروا واجهة المستخدم في هذا الوضع قبل النشر.

تطبيقي: نمط حركة آمن

تُطبّق الحركة الآمنة افتراضيًا، وتُغلّف بطريقة تسهّل تعطيلها عالميًا.

@keyframes slideIn {
  from { opacity: 0; transform: translateX(-16px); }
  to   { opacity: 1; transform: translateX(0); }
}

@media (prefers-reduced-motion: no-preference) {
  .alert {
    animation: slideIn 0.3s ease;
  }
}

ينبغي الإبقاء على حركة التركيز

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

المكتبات و prefers-reduced-motion

تدعم مكتبات الرسوم المتحركة الشائعة (Framer Motion وGSAP وAnime.js) تقليل الحركة مدمجًا. وتجعل الدالة useReducedMotion() في Framer Motion تعطيل الرسوم المتحركة المعقدة بشكل مشروط في React أمرًا سهلًا.

تحقق سريع

ما ميزة وسائط CSS التي تكتشف تفضيل المستخدم لرؤية حركة أقل في واجهة المستخدم؟

أجب عليها في الدرس التفاعلي

مراجعة: prefers-reduced-motion

يحتاج بعض المستخدمين إلى حركة أقل لأسباب تتعلق بالصحة الدهليزية والعصبية. استخدموا @media (prefers-reduced-motion: reduce) لتعطيل الرسوم المتحركة أو تبسيطها. اكتشفوا التفضيل في JS باستخدام matchMedia. الخيار الجذري: اضبطوا animation/transition-duration على 0.01ms عالميًا. ويوصي WCAG 2.3.3 بذلك. اختبروا باستخدام لوحة Rendering في DevTools.

البدء مجانًا

تعلم HTML مع معلم ذكاء اصطناعي — مجانًا

اكتب وقم بتشغيل أكوادك الفعلية في المتصفح، واحصل على مساعدة فورية من معلم ذكاء اصطناعي متاح 24/7، واستمر من حيث توقفت على الويب أو في التطبيق.

الدورات: 41
الدروس: 163

ابدأ التعلم مجانًا عرض الدورة الكاملة

الأسئلة الشائعة

هل درس «احترام prefers-reduced-motion» مجاني؟

نعم — نص درس «احترام prefers-reduced-motion» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة Frontend Academy، انتقل إلى CoddyKit PRO. تتضمن دورة Frontend Academy 4 دروس في المجموع.

ماذا ستتعلم في «احترام prefers-reduced-motion»؟

اكتشف استعلام الوسائط prefers-reduced-motion وعطّل الرسوم المتحركة أو قلّلها للمستخدمين الذين طلبوا حركة أقل. تتمرن على Frontend Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

هل أحتاج إلى خبرة سابقة لأبدأ Frontend Academy؟

لا تُشترط خبرة سابقة. Frontend Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 4 من أصل 4.

كم من الوقت يستغرق درس «احترام prefers-reduced-motion»؟

معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.

هل يمكنني كتابة وتشغيل أكواد في درس Frontend Academy هذا؟

نعم. كل درس في Frontend Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.

جميع الدروس في هذه الدورة

← العودة إلى Frontend Academy