prefers-reduced-motion في CSS وJS
اكتشفوا إعداد المستخدم للحركة واحترموه
prefers-reduced-motion في CSS وJS درس مجاني في Web Accessibility Academy على CoddyKit. هذا هو الدرس 1 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في Web Accessibility Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة Web Accessibility Academy 4 دروس في المجموع.
إعداد يمكنك قراءته
تتيح أنظمة التشغيل للمستخدمين طلب حركة أقل. وتكشف ميزة الوسائط prefers-reduced-motion هذا الاختيار لموقعك مباشرةً. 🎚️
أين يفعّله المستخدمون
يفعّل المستخدمون خيار reduce motion في إعدادات أنظمة التشغيل على macOS وiOS وWindows وAndroid. ومهمتك هي الاستجابة لهذا الاختيار، لا التشكيك فيه.
قيمتان
تعرض الميزة إحدى حالتين. فإما أن تكون reduce، أي تهدئة الحركات، أو no-preference لجميع المستخدمين الآخرين.
الاستعلام عنها في CSS
ضع الأنماط المهدّئة داخل استعلام وسائط. عندما يطلب المستخدم reduce للحركة، يمكنك تقليل الانتقالات إلى حد يكاد لا يُذكر.
@media (prefers-reduced-motion: reduce) {
* { animation-duration: 0.01ms !important; }
}قلّل الحركة ولا تحذفها دائمًا
لا تعني تهدئة الحركة تجميد الصفحة. استبدل الانزلاق الكبير بظهور تدريجي لطيف fade، لتظل الواجهة نابضة بالحياة من دون حركات مفاجئة.
صمّم الحركة مفعّلة أولًا
أنشئ أنماط الحركة المعتادة، ثم أضف الاستعلام لتقليلها. يحافظ هذا الأسلوب progressive على تجربة افتراضية غنية.
اقرأها في JavaScript
بالنسبة إلى الحركات البرمجية، اسأل المتصفح مباشرةً. تُرجع matchMedia ما إذا كان المستخدم يفضّل الحركة المخفّضة في الوقت الحالي.
const mq = window.matchMedia('(prefers-reduced-motion: reduce)');
if (mq.matches) { /* skip the big animation */ }استجب للتغييرات المباشرة
يمكن للمستخدمين تبديل الإعداد أثناء الجلسة. استمع إلى التغييرات حتى تحترم حركات JavaScript التفضيل الجديد من دون إعادة تحميل.
mq.addEventListener('change', e => updateMotion(e.matches));غطِّ سلوك التمرير
يُعدّ التمرير السلس حركة أيضًا. داخل الاستعلام، اضبط scroll-behavior على auto لتصبح الانتقالات فورية لمن طلبوا ذلك.
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
}إنها حاجة حقيقية
هذا الخيار ليس إضافة ترفيهية. فبالنسبة إلى بعض المستخدمين، تسبب الحركة الكبيرة الغثيان أو الدوار فعلًا، ولذلك من المهم احترام طلبهم.
الإيقاف الافتراضي هو الأكثر أمانًا
عند الشك، اجعل المسار الأكثر أمانًا هو الافتراضي. فاختيار حركة هادئة لا يضر أحدًا، ويجعل الصفحة مريحة للجميع.
اختبار سريع
كيف يعرف موقع الويب أن المستخدم يريد حركة أقل؟
مراجعة
اقرأ prefers-reduced-motion في CSS أو باستخدام matchMedia، ثم هدّئ الحركات بدلًا من إلغاء حيوية الصفحة. واحترم التغييرات المباشرة أيضًا. ✅
تعلم HTML مع معلم ذكاء اصطناعي — مجانًا
اكتب وقم بتشغيل أكوادك الفعلية في المتصفح، واحصل على مساعدة فورية من معلم ذكاء اصطناعي متاح 24/7، واستمر من حيث توقفت على الويب أو في التطبيق.
- الدورات
- 30
- الدروس
- 120
الأسئلة الشائعة
هل درس «prefers-reduced-motion في CSS وJS» مجاني؟
نعم — نص درس «prefers-reduced-motion في CSS وJS» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة Web Accessibility Academy، انتقل إلى CoddyKit PRO. تتضمن دورة Web Accessibility Academy 4 دروس في المجموع.
ماذا ستتعلم في «prefers-reduced-motion في CSS وJS»؟
اكتشفوا إعداد المستخدم للحركة واحترموه تتمرن على Web Accessibility Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.
هل أحتاج إلى خبرة سابقة لأبدأ Web Accessibility Academy؟
لا تُشترط خبرة سابقة. Web Accessibility Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 1 من أصل 4.
كم من الوقت يستغرق درس «prefers-reduced-motion في CSS وJS»؟
معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.
هل يمكنني كتابة وتشغيل أكواد في درس Web Accessibility Academy هذا؟
نعم. كل درس في Web Accessibility Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.
جميع الدروس في هذه الدورة
- prefers-reduced-motion في CSS وJS
- الاضطرابات الدهليزية ومخاطر Parallax
- حد الومضات الثلاث للنوبات
- الإيقاف المؤقت والإيقاف والإخفاء للمحتوى المتحرك تلقائياً