احترم خيار تقليل الحركة في موقعك: مثال CSS صغير باستخدام prefers-reduced-motion

استعمل @media (prefers-reduced-motion: reduce) لتغيير الحركات غير الضرورية عندما يطلب الزائر تقليلها. وجود الإعداد في جهازه لا يوقف تلقائيًا كل حركة كتبتها في موقعك؛ عليك توفير تنسيق يحترم التفضيل.

مثال لبطاقة ترتفع قليلًا عند التفاعل

افترض أن بطاقاتك تحمل الفئة article-card. أضف القاعدة التالية إلى ملف CSS أو مساحة CSS المخصصة في نسخة تجريبية من القالب:

.article-card {
  transition: transform 160ms ease;
}
.article-card:hover {
  transform: translateY(-4px);
}
@media (prefers-reduced-motion: reduce) {
  .article-card {
    transition: none;
  }
  .article-card:hover {
    transform: none;
  }
}

عند طلب تقليل الحركة تبقى البطاقة قابلة للنقر، لكن انتقالها العمودي يتوقف. اسم الفئة في المثال ليس اسمًا مضمونًا في قالب Blogger؛ بدّله بالفئة الفعلية للعنصر المطلوب، ولا تلصق قواعد عامة على كل العناصر دون اختبار.

كيف تتأكد أنه يعمل؟

1. جرّب التفاعل مع البطاقة والحركة مفعلة.
2. في Windows 11 راجع Accessibility → Visual effects → Animation effects. وعلى iPhone راجع Accessibility → Motion وفعّل تقليل الحركة.
3. ارجع إلى الموقع وجرّب البطاقة مجددًا؛ أعد تحميل الصفحة عند الحاجة.
4. اختبر لوحة المفاتيح أيضًا وتأكد من بقاء مؤشر التركيز وأزرار الفتح والإغلاق واضحة.

حدود القاعدة

هذه القاعدة تضبط العناصر المحددة في CSS، ولا توقف وحدها فيديو أو GIF أو حركة ينشئها سكربت مستقل. لا تُخفِ مؤشر تحميل يحمل معلومة ضرورية؛ قدّم بديلًا ثابتًا يوضح أن العملية مستمرة.

مرجع الخاصية: توثيق prefers-reduced-motion في MDN.