Prefers-Color-Scheme وPrefers-Reduced-Motion
احترم تفضيلات نظام المستخدم للوضع الداكن وتقليل حركات الرسوم المتحركة
Prefers-Color-Scheme وPrefers-Reduced-Motion درس مجاني في CSS Academy على CoddyKit. هذا هو الدرس 3 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في CSS Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة CSS Academy 4 دروس في المجموع.
ميزات الوسائط المتعلقة بتفضيلات المستخدم
يمكن لـ CSS الاستعلام عن تفضيلات نظام المستخدم التي تتجاوز حجم الشاشة. ويتيح ذلك تفعيل الوضع الداكن تلقائيًا وإنشاء رسوم متحركة تراعي إمكانية الوصول من دون تفاعل المستخدم مع موقعك.
prefers-color-scheme
تكتشف ما إذا كان المستخدم قد ضبط نظام التشغيل على الوضع الفاتح أو الداكن:
<p>This page follows your OS color-scheme preference.</p>
تنفيذ الوضع الداكن التلقائي
يستخدم التنفيذ الأنظف متغيرات CSS تستبدل قيمها بناءً على التفضيل:
<p>Auto dark mode via CSS variables.</p>
prefers-reduced-motion
يشعر بعض المستخدمين بالغثيان أو الانزعاج بسبب الرسوم المتحركة. وتكتشف ميزة الوسائط prefers-reduced-motion: reduce تفضيل إمكانية الوصول هذا.
<div class="box spun"></div>
احترام تفضيلات الحركة
بدلًا من إيقاف جميع الرسوم المتحركة، وفّر رسومًا متحركة بديلة ودقيقة:
<div class="card">Card with motion-aware transition</div>
prefers-contrast
تكتشف ما إذا كان المستخدم يفضل تباينًا أعلى (لإمكانية الوصول) أو تباينًا أقل. اضبط اختيارات الألوان وفقًا لذلك:
<p>Contrast-aware text</p>
prefers-reduced-transparency
يفضل بعض المستخدمين ذوي الإعاقات البصرية قدرًا أقل من الشفافية. قلّل تأثيرات backdrop-filter والتأثيرات المعتمدة على opacity:
<div class="glass-card">Glass card</div>
الوصول إلى التفضيلات من JavaScript
استعلم عن هذه التفضيلات من JavaScript باستخدام window.matchMedia():
<div class="demo dark-mode" id="demo">Preference-aware box (dark-mode class toggled via JS below)</div>
<script>
const dark = window.matchMedia('(prefers-color-scheme: dark)');
dark.addEventListener('change', e => {
document.getElementById('demo').classList.toggle('dark-mode', e.matches);
});
</script>
تفضيل النظام + التجاوز اليدوي
احترم تفضيل النظام افتراضيًا، واسمح للمستخدمين بتجاوزه عبر مفتاح تبديل. خزّن التجاوز في localStorage وطبّق فئة على <html>:
<div class="theme dark">Manual dark override applied via class</div>
prefers-reduced-data
تكتشف ما إذا كان المستخدم قد فعّل وضع توفير البيانات. اعرض صورًا أصغر أو تخطَّ الموارد غير الأساسية:
<div class="hero">Hero banner</div>
الاختبار في DevTools
في Chrome DevTools، تتيح لك علامة التبويب Rendering محاكاة الوضع الداكن وتقليل الحركة وميزات الوسائط الأخرى المتعلقة بالتفضيلات، من دون تغيير إعدادات نظام التشغيل.
تحقق سريع
ما أفضل طريقة لتنفيذ الوضع الداكن التلقائي مع دعم مفتاح تبديل يدوي للمستخدم؟
مراجعة
يتيح prefers-color-scheme تفعيل الوضع الداكن تلقائيًا. وينبغي لـ prefers-reduced-motion تعطيل الرسوم المتحركة أو تبسيطها لإتاحة أفضل. نفّذ كليهما باستخدام متغيرات CSS لإنشاء شيفرة نظيفة وسهلة الصيانة. ووفر دائمًا تجاوزًا يدويًا حتى يتمكن المستخدمون من التحكم في تفضيلاتهم بشكل مستقل عن نظام التشغيل.
تعلم CSS مع معلم ذكاء اصطناعي — مجانًا
اكتب وقم بتشغيل أكوادك الفعلية في المتصفح، واحصل على مساعدة فورية من معلم ذكاء اصطناعي متاح 24/7، واستمر من حيث توقفت على الويب أو في التطبيق.
- الدورات
- 40
- الدروس
- 159
الأسئلة الشائعة
هل درس «Prefers-Color-Scheme وPrefers-Reduced-Motion» مجاني؟
نعم — نص درس «Prefers-Color-Scheme وPrefers-Reduced-Motion» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة CSS Academy، انتقل إلى CoddyKit PRO. تتضمن دورة CSS Academy 4 دروس في المجموع.
ماذا ستتعلم في «Prefers-Color-Scheme وPrefers-Reduced-Motion»؟
احترم تفضيلات نظام المستخدم للوضع الداكن وتقليل حركات الرسوم المتحركة تتمرن على CSS Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.
هل أحتاج إلى خبرة سابقة لأبدأ CSS Academy؟
لا تُشترط خبرة سابقة. CSS Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 3 من أصل 4.
كم من الوقت يستغرق درس «Prefers-Color-Scheme وPrefers-Reduced-Motion»؟
معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.
هل يمكنني كتابة وتشغيل أكواد في درس CSS Academy هذا؟
نعم. كل درس في CSS Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.
جميع الدروس في هذه الدورة
- الصياغة ونقاط التوقف الشائعة
- استعلامات العرض والارتفاع والاتجاه
- Prefers-Color-Scheme وPrefers-Reduced-Motion
- دمج استعلامات وسائط متعددة