رسوم متحركة ميسّرة باستخدام prefers-reduced-motion
احترم احتياجات إمكانية الوصول بتعطيل الرسوم المتحركة أو تقليلها للمستخدمين الحساسين للحركة
رسوم متحركة ميسّرة باستخدام prefers-reduced-motion درس مجاني في CSS Academy على CoddyKit. هذا هو الدرس 4 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في CSS Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة CSS Academy 4 دروس في المجموع.
لماذا نقلل الحركة؟
يعاني بعض المستخدمين من اضطرابات دهليزية أو صرع أو حالات أخرى تجعل الرسوم المتحركة مؤذية لهم. يوفر CSS استعلام الوسائط prefers-reduced-motion لاكتشاف تفضيلات النظام لديهم واحترامها.
استعلام prefers-reduced-motion
قيم الاستعلام:
no-preference— لم يحدد المستخدم تفضيلًاreduce— فعّل المستخدم تقليل الحركة في إعدادات نظام التشغيل
<div class="box"></div>
الخيار الجذري (غير موصى به)
تطبيق شائع لكنه بدائي يلغي جميع الرسوم المتحركة. كما أنه يزيل إشارات الحركة المفيدة التي لا تسبب فقدان الاتجاه:
<div class="box"></div>
الأفضل: الحركة الاختيارية
نمط أكثر أمانًا: عرّف الرسوم المتحركة فقط للمستخدمين الذين لم يحددوا تفضيلًا للحركة، واترك الحالة الافتراضية بلا حركة:
<button class="btn">Button</button>
<div class="card">Card</div>
استبدال أنواع الرسوم المتحركة
استبدل الحركة المربكة مثل translate وscale وrotate ببدائل أكثر سهولة مثل opacity وcolor للمستخدمين الذين يفضلون تقليل الحركة:
<div class="card demo-hover">Hover me</div>
الرسوم المتحركة اللانهائية
تُعد الرسوم المتحركة اللانهائية مثل مؤشرات الانتظار والنبضات مزعجة بشكل خاص. وفّر بديلًا ثابتًا:
<div class="spinner"></div>
تأثيرات المنظر
قد يسبب التمرير بتأثير المنظر دوارًا شديدًا. عطّله دائمًا للمستخدمين الذين يفضلون تقليل الحركة:
<div class="parallax">Parallax section</div>
الوصول باستخدام JavaScript
تحقق من التفضيل في JavaScript عند استخدام Web Animations API أو مكتبات التمرير:
<div class="spinner" id="rm-spinner"></div>
<p id="rm-status">Checking preference…</p>
<script>
const reducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)');
const el = document.getElementById('rm-spinner');
const status = document.getElementById('rm-status');
if (!reducedMotion.matches) {
el.classList.add('spin');
status.textContent = 'Motion allowed — spinning';
} else {
status.textContent = 'Reduced motion — animation skipped';
}
</script>
WCAG والحركة
يتطلب WCAG 2.3.3 (AAA) إمكانية تعطيل الرسوم المتحركة التي يطلقها التفاعل. ويُعد استخدام prefers-reduced-motion نهج CSS الموصى به لاستيفاء هذا المعيار.
اختبار تقليل الحركة
في علامة التبويب Rendering في Chrome DevTools، فعّل «Emulate CSS prefers-reduced-motion: reduce» للاختبار دون تغيير إعدادات نظام التشغيل. في macOS: تفضيلات النظام ← تسهيلات الاستخدام ← تقليل الحركة.
توثيق الغرض
علّق على الرسوم المتحركة لتوضيح ما إذا كانت وظيفية أم زخرفية فحسب. ينبغي أن تتوفر للرسوم المتحركة الوظيفية، التي تشير إلى عملية أو تقدم، بدائل سهلة الوصول؛ أما الرسوم الزخرفية فيمكن إزالتها ببساطة.
تحقق سريع
ما النهج الأفضل للتعامل مع prefers-reduced-motion عند رفع بطاقة استجابةً لتحويم المؤشر؟
مراجعة
استخدم prefers-reduced-motion: reduce لاكتشاف الحساسية تجاه الحركة. وبدلًا من إلغاء جميع الرسوم المتحركة، وفّر حالة افتراضية بلا حركة، وفعّل الحركة اختياريًا داخل استعلامات no-preference. واستبدل تحريكات transform المربكة بانتقالات opacity أو color للمستخدمين الذين يفضلون تقليل الحركة. اختبر باستخدام محاكاة DevTools.
الأسئلة الشائعة
هل درس «رسوم متحركة ميسّرة باستخدام prefers-reduced-motion» مجاني؟
نعم — نص درس «رسوم متحركة ميسّرة باستخدام prefers-reduced-motion» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة CSS Academy، انتقل إلى CoddyKit PRO. تتضمن دورة CSS Academy 4 دروس في المجموع.
ماذا ستتعلم في «رسوم متحركة ميسّرة باستخدام prefers-reduced-motion»؟
احترم احتياجات إمكانية الوصول بتعطيل الرسوم المتحركة أو تقليلها للمستخدمين الحساسين للحركة تتمرن على CSS Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.
هل أحتاج إلى خبرة سابقة لأبدأ CSS Academy؟
لا تُشترط خبرة سابقة. CSS Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 4 من أصل 4.
كم من الوقت يستغرق درس «رسوم متحركة ميسّرة باستخدام prefers-reduced-motion»؟
معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.
هل يمكنني كتابة وتشغيل أكواد في درس CSS Academy هذا؟
نعم. كل درس في CSS Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.
جميع الدروس في هذه الدورة
- صياغة @keyframes وخاصية animation
- اتجاه الحركة ووضع الملء والتكرار
- تسلسل الرسوم المتحركة وربطها
- رسوم متحركة ميسّرة باستخدام prefers-reduced-motion