29-dars

prefers-reduced-motion nima o'zi?

"Animatsiya yoqmaydigan odamlar uchun"

1. Avval real hayot

Hamma animatsiyani yoqtirmaydi.

Ba'zi odamlar:

• ko'zi charchaydi
• boshi aylanadi
• saytda hamma narsa qimirlasa yomon bo'ladi

Shu sabab telefon va kompyuterda bitta sozlama bor:

"Animatsiyalarni kamaytir"

Odam o'zi yoqadi. Biz majburlamaymiz.

2. CSS bu yerda nima qiladi?

CSS so'raydi:

"Bu odam animatsiyani kamaytirishni xohlayaptimi?"

Agar ha bo'lsa:

@media (prefers-reduced-motion: reduce) {
  /* animatsiyani kamaytir */
}

Agar yo'q bo'lsa:

• bu kod umuman ishlamaydi
• animatsiya normal qoladi

3. Eng muhim joy (diqqat)

👉 SEN animatsiya yozishni to'xtatmaysan 👉 SEN faqat tanlov berasan

Ya'ni:

• 10 odam → animatsiya bilan
• 1 odam → animatsiyasiz

Hamma xursand 🙂

4. Oddiy misol (100% tushunarli)

Avval:

.button {
  transition: transform 200ms;
}

Endi qo'shamiz:

.button {
  transition: transform 200ms;
}

@media (prefers-reduced-motion: reduce) {
  .button {
    transition: none;
  }
}

🧠 Natija:

• Oddiy odam → tugma silliq harakatlanadi
• Motion yoqmaydigan odam → tugma darrov o'zgaradi

5. QACHON o'chadi?

❗️Faqat bitta holatda:

foydalanuvchi OS sozlamasida "Reduce motion" ni yoqqan bo'lsa

Aks holda:

• hech qachon o'chmaydi
• sen yozgan animatsiya ishlaydi

6. NIMANI o'chiramiz?

Ko'pincha:

• katta animatsiyalar
• loop bo'ladiganlar
• ko'zni charchatadiganlar

Masalan:

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.loader {
  animation: spin 1s infinite;
}

@media (prefers-reduced-motion: reduce) {
  .loader {
    animation: none;
  }
}

Shuni o'chirish yaxshi.

7. To'liq misol (real loyiha)

/* Normal holat */
.card {
  transition: transform 300ms ease, box-shadow 300ms ease;
}

.card:hover {
  transform: translateY(-8px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
}

/* Animatsiya yoqmaydiganlar uchun */
@media (prefers-reduced-motion: reduce) {
  .card {
    transition: none;
  }
  
  .card:hover {
    transform: none;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  }
}

🧠 Bu yerda:

• Normal → hover bo'lganda card yuqoriga ko'tariladi
• Reduced motion → faqat shadow o'zgaradi, transform yo'q

8. Qaysi animatsiyalarni o'chirish kerak?

✅ O'chirish kerak:

• animation: spin infinite
• transition: transform 500ms (katta harakatlar)
• @keyframes bilan loop animatsiyalar
• Parallax effect'lar

⚠️ O'chirish shart emas:

• Kichik transition'lar (100-200ms)
• Color o'zgarishi
• Opacity o'zgarishi

👉 Lekin yaxshiroq bo'ladi agar ularni ham o'chirsang.

9. Global qilish (eng yaxshi amaliyot)

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

🧠 Bu:

• Barcha animatsiyalarni deyarli o'chiradi
• Lekin 0.01ms qoldiradi (to'liq o'chirish ba'zida muammo qiladi)

10. Qanday tekshirish mumkin?

Chrome DevTools:

1. F12 → Console
2. Yoz: window.matchMedia('(prefers-reduced-motion: reduce)').matches
3. Agar true bo'lsa → reduce motion yoqilgan

OS sozlamalari:

Windows:

• Settings → Ease of Access → Display → Show animations

macOS:

• System Preferences → Accessibility → Display → Reduce motion

iOS:

• Settings → Accessibility → Motion → Reduce Motion

11. Nega bu muhim?

Accessibility (a11y)

👉 Bu accessibility standarti.

👉 WCAG (Web Content Accessibility Guidelines) tavsiya qiladi.

👉 Ba'zi odamlar uchun bu zarur.

Real statistik:

• ~15% odamlar motion sensitivity'ga ega
• Ko'pchilik saytni tashlab ketadi agar animatsiya ko'p bo'lsa

12. Xulosa

✅ Har doim prefers-reduced-motion ni hisobga oling

✅ Katta animatsiyalarni o'chiring

✅ Kichik transition'larni ham o'chirish yaxshi

✅ Global qilish eng oson yo'l

👉 Bu — professional dasturchi belgisi.