Brogrammist

CSS prefers-reduced-motion

Agar kompyuteringizda yoki telefoningizda Reduce Motion (Harakatni Kamaytirish) yoqilgan bo'lsa, UI ortiqcha animatsiyalarsiz ishlashni boshlaydi.
Masalan, tugmacha odatda bosilganda kichrayib-kattalashsa, Reduce Motion holatida faqat rangi o'zgaradi va hech qanday animatsiya ko'rmaysiz.

Bu sozlama nega kerak:
1. "Accessibility", ya'ni ko'rish bog'liq nuqsoni bor odamlar uchun.
2. dastur tezroq ishlashi uchun
3. kamroq energiya sarfi uchun va h.k.

Veb-saytingiz yoki veb-dasturingiz "Accessible" bo'lishi uchun sistema sozlamalari bilan mos ishlashi zarur. Agar sistemada Reduced Motion yoqilgan bo'lsa animatsiyalarni o'chirishingiz yoki kamaytirishingiz kerak.

CSS da bu quyidagicha qilinadi:

div {
  transition: transform 1s;
  animation: fadeIn 2s;
}

@media (prefers-reduced-motion) {
  div {
    transition: none;
    animation: none;
  }
  
/* yoki boshqa juda oddiy 
  animatsiya bilan almashtiriladi*/
}

👍13🔥8👏2

www.tgoop.com/brogrammist/191

1.02K viewsedited  May 23, 2024 at 18:35

CSS prefers-reduced-motion

Agar kompyuteringizda yoki telefoningizda Reduce Motion (Harakatni Kamaytirish) yoqilgan bo'lsa, UI ortiqcha animatsiyalarsiz ishlashni boshlaydi.
Masalan, tugmacha odatda bosilganda kichrayib-kattalashsa, Reduce Motion holatida faqat rangi o'zgaradi va hech qanday animatsiya ko'rmaysiz.

Bu sozlama nega kerak:
1. "Accessibility", ya'ni ko'rish bog'liq nuqsoni bor odamlar uchun.
2. dastur tezroq ishlashi uchun
3. kamroq energiya sarfi uchun va h.k.

Veb-saytingiz yoki veb-dasturingiz "Accessible" bo'lishi uchun sistema sozlamalari bilan mos ishlashi zarur. Agar sistemada Reduced Motion yoqilgan bo'lsa animatsiyalarni o'chirishingiz yoki kamaytirishingiz kerak.

CSS da bu quyidagicha qilinadi:

div {
  transition: transform 1s;
  animation: fadeIn 2s;
}

@media (prefers-reduced-motion) {
  div {
    transition: none;
    animation: none;
  }
  
/* yoki boshqa juda oddiy 
  animatsiya bilan almashtiriladi*/
}

BY Brogrammist