Under the Hood: Sürükleme, Dokunma ve CSS Cascade
Yeniden boyutlandırılabilir bir UI paneli oluşturmak göründüğünden daha zordur. Düzenleri, dokunma olaylarını ve CSS kurallarını aynı anda yönetmeniz gerekir.
İşte görsel bir diff UI'ı için yaptığım son yeniden tasarım çalışmamdan üç teknik ders.
- Düzenler için pencere genişliğini kullanmayı bırakın
Düzeninizin dikey mi yoksa yatay mı olduğuna karar vermek için window.innerWidth kullanmayın. Eğer bir kullanıcı pencereyi yeniden boyutlandırırsa, mantığınız bozulur.
Bunun yerine gerçek CSS durumunu kullanın. flex-direction değerini kontrol etmek için getComputedStyle kullanın. Bu, tüm medya sorguları uygulandıktan sonra gerçek değeri okur. Sürükleme mantığınızın kullanıcının gerçekte gördüğüyle eşleşmesini sağlar.
- Dokunma ve fare olaylarını birlikte yönetin
Sürükleme işleminin hem masaüstünde hem de mobilde çalışmasını sağlamak için bir