Brogrammist

This media is not supported in your browser

VIEW IN TELEGRAM

Reduced motion GIF

Jamoamizda "Accessiblity" bo'yicha mutaxassis bor. Kecha dizayn sistemamiz veb-saytiga GIF lari bor sahifa qo'shgandim. Keyin yozib qoldi:

- Diyorbek, animatsiya qoidalari bo'yicha sahifani qo'shibsiz-u, sahifani o'zida qoidalarni ishlatmabsiz! 😬

- 😐🤦‍♂️

Profilimdagi "seniOr" degan yozuvdan uyalib ketdim. 😄️️️️️️

Xullas, Reduce Motion bo'lganda GIFlar to'xtatish kerak ekan. Chunki GIF rasmlar ham sahifaning harakatlanuvchi elementlaridan biri.

Reduce Motion bo'lganida GIF ni statik rasm bilan almashtirilsa, masala hal. Buni qilish uchun esa shunchaki HTML ni yaxshi bilish yetarli! JavaScript kerakmas.

Mana:

<picture>
  <source srcset="no-motion.jpg" media="(prefers-reduced-motion: reduce)">
  <img src="animated.gif">
</picture>

<picture> tegini ishlatishni bilarmidingiz? Masalan men <source> tegida "media" atributi borligini bilmasdim! 😬

www.tgoop.com/brogrammist/192

1.1K viewsMay 23, 2024 at 22:02

Reduced motion GIF

Jamoamizda "Accessiblity" bo'yicha mutaxassis bor. Kecha dizayn sistemamiz veb-saytiga GIF lari bor sahifa qo'shgandim. Keyin yozib qoldi:

- Diyorbek, animatsiya qoidalari bo'yicha sahifani qo'shibsiz-u, sahifani o'zida qoidalarni ishlatmabsiz! 😬

- 😐🤦‍♂️

Profilimdagi "seniOr" degan yozuvdan uyalib ketdim. 😄️️️️️️

Xullas, Reduce Motion bo'lganda GIFlar to'xtatish kerak ekan. Chunki GIF rasmlar ham sahifaning harakatlanuvchi elementlaridan biri.

Reduce Motion bo'lganida GIF ni statik rasm bilan almashtirilsa, masala hal. Buni qilish uchun esa shunchaki HTML ni yaxshi bilish yetarli! JavaScript kerakmas.

Mana:

<picture>
  <source srcset="no-motion.jpg" media="(prefers-reduced-motion: reduce)">
  <img src="animated.gif">
</picture>

BY Brogrammist