90. استعلامات وسائط إمكانية الوصول

يسمح لك CSS الحديث بتلبية تفضيلات المستخدم المحددة في نظام التشغيل الخاص به، مما يعزز إمكانية الوصول.

1. prefers-color-scheme (الوضع الليلي)

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

css /* الأنماط الافتراضية (الوضع الفاتح) */ body { background-color: white; color: black; }

/* أنماط الوضع الليلي / @media (prefers-color-scheme: dark) { body { background-color: #121212; / رمادي داكن جداً / color: #f0f0f0; / نص مائل للبياض */ } a { color: lightblue; } }

2. prefers-reduced-motion

يعاني بعض المستخدمين من دوار الحركة أو التشتت بسبب التأثيرات المفرطة للـ parallax، أو تأثيرات التمرير، أو الرسوم المتحركة الكبيرة. يسمح لك هذا الاستعلام بتعطيل أو تبسيط الرسوم المتحركة لهؤلاء المستخدمين.

css /* رسوم متحركة معقدة افتراضية */ .spinner { animation: spin 3s infinite linear; }

/* أنماط مبسطة للمستخدمين الذين يفضلون حركة أقل / @media (prefers-reduced-motion: reduce) { .spinner { animation: none; / تعطيل الرسوم المتحركة / transition: none; / تعطيل الانتقالات */ } }