CSS يتيح استعلام خصائص المستخدم وإمكانيات الجهاز بشكل أدق:
**prefers-color-scheme:** `@media (prefers-color-scheme: dark)` — المستخدم يفضل الوضع الداكن. `@media (prefers-color-scheme: light)` — الوضع الفاتح.
**prefers-reduced-motion:** `@media (prefers-reduced-motion: reduce)` — المستخدم يُفضل تقليل الحركة. ضروري للوصولية — يجب تعطيل الأنيميشن غير الضرورية.
**hover:** `@media (hover: hover)` — الجهاز يدعم hover (ليس touch فقط). `@media (hover: none)` — جهاز touch بدون hover.
**pointer:** `@media (pointer: fine)` — مؤشر دقيق (ماوس) — مناسب لعناصر صغيرة. `@media (pointer: coarse)` — مؤشر خشن (إصبع) — يحتاج مساحات أكبر.
**prefers-contrast:** `@media (prefers-contrast: high)` — المستخدم يحتاج تباين عالٍ.
| 1 | /* Dark Mode تلقائي */ |
| 2 | @media (prefers-color-scheme: dark) { |
| 3 | :root { |
| 4 | --bg: #0f172a; |
| 5 | --fg: #f1f5f9; |
| 6 | } |
| 7 | } |
| 8 | |
| 9 | /* تعطيل الأنيميشن */ |
| 10 | @media (prefers-reduced-motion: reduce) { |
| 11 | *, *::before, *::after { |
| 12 | animation-duration: 0.01ms !important; |
| 13 | transition-duration: 0.01ms !important; |
| 14 | } |
| 15 | } |
مثال 1: نظام شامل لتفضيلات المستخدم
| 1 | /* Dark Mode */ |
| 2 | @media (prefers-color-scheme: dark) { |
| 3 | :root { |
| 4 | --color-bg: #0f172a; |
| 5 | --color-surface:#1e293b; |
| 6 | --color-text: #f1f5f9; |
| 7 | --color-muted: #94a3b8; |
| 8 | --color-border: #334155; |
| 9 | } |
| 10 | } |
| 11 | |
| 12 | /* أزرار أكبر لأجهزة Touch */ |
| 13 | @media (pointer: coarse) { |
| 14 | .btn { min-height: 44px; min-width: 44px; } |
| 15 | .nav-link { padding: 12px 16px; } |
| 16 | } |
| 17 | |
| 18 | /* إخفاء hover effects على Touch */ |
| 19 | @media (hover: none) { |
| 20 | .card:hover { transform: none; } |
| 21 | } |
| 22 | |
| 23 | /* تقليل الحركة */ |
| 24 | @media (prefers-reduced-motion: reduce) { |
| 25 | .animated { animation: none !important; transition: none !important; } |
| 26 | } |