Arkadaşlar merhaba, son zamanlarda üzerinde çalıştığım bir projede buton hover efektlerini optimize etmeye çalışıyorum ve takıldığım bazı noktalar var. Özellikle mobil cihazlarda ve düşük donanımlı tarayıcılarda performans sorunları yaşıyorum. Normalde basit bir renk geçişi veya gölge efekti kullanıyordum, ama proje büyüdükçe CSS transition ve transform değerlerinin bile bazen kasılmalara yol açtığını fark ettim. Özellikle liste halinde çok sayıda buton olduğunda, hover anında sayfa yeniden boyanıyor gibi hissediyorum. Sizce bu durumda will-change gibi CSS özelliklerini kullanmak yeterli oluyor mu, yoksa daha farklı bir yaklaşım mı denemeliyim?
Bir de JavaScript ile yaptığım daha karmaşık hover efektleri var, mesela butonun üzerine gelince arka planda hafif bir dalga animasyonu oluşturuyorum. Bunu requestAnimationFrame ile kontrol etmeye çalışıyorum ama yine de özellikle eski tarayıcılarda takılmalar oluyor. Acaba bu tarz efektleri tamamen CSS'e mi devretmek daha mantıklı, yoksa JS kullanmak zorunlu mu? Özellikle buton sayısı arttığında performansı korumak için hangi teknikleri tercih ediyorsunuz? Ben şu an her buton için ayrı bir event listener tanımlamaktan kaçınıyorum, event delegation kullanıyorum ama yine de tam istediğim akıcılığı yakalayamadım.
Son olarak, hover efektlerinin erişilebilirlik tarafı da var. Özellikle dokunmatik cihazlarda hover geçerli olmadığı için, bu efektleri sadece fare kullananlar için mi sınırlamalıyız, yoksa mobilde de touch olaylarına benzer bir mantık mı eklemeliyiz? Ben şu an medya sorgusu ile hover özelliği destekleyen cihazları tespit edip efektleri ona göre aktif ediyorum, ama bazı kullanıcılar hem fare hem dokunmatik kullanabiliyor (mesela hibrit cihazlar). Bu konuda nasıl bir yol izliyorsunuz, deneyimlerinizi merak ediyorum.
Bir de JavaScript ile yaptığım daha karmaşık hover efektleri var, mesela butonun üzerine gelince arka planda hafif bir dalga animasyonu oluşturuyorum. Bunu requestAnimationFrame ile kontrol etmeye çalışıyorum ama yine de özellikle eski tarayıcılarda takılmalar oluyor. Acaba bu tarz efektleri tamamen CSS'e mi devretmek daha mantıklı, yoksa JS kullanmak zorunlu mu? Özellikle buton sayısı arttığında performansı korumak için hangi teknikleri tercih ediyorsunuz? Ben şu an her buton için ayrı bir event listener tanımlamaktan kaçınıyorum, event delegation kullanıyorum ama yine de tam istediğim akıcılığı yakalayamadım.
Son olarak, hover efektlerinin erişilebilirlik tarafı da var. Özellikle dokunmatik cihazlarda hover geçerli olmadığı için, bu efektleri sadece fare kullananlar için mi sınırlamalıyız, yoksa mobilde de touch olaylarına benzer bir mantık mı eklemeliyiz? Ben şu an medya sorgusu ile hover özelliği destekleyen cihazları tespit edip efektleri ona göre aktif ediyorum, ama bazı kullanıcılar hem fare hem dokunmatik kullanabiliyor (mesela hibrit cihazlar). Bu konuda nasıl bir yol izliyorsunuz, deneyimlerinizi merak ediyorum.