Giriş: Ölçeklenebilir Geçiş Animasyonlarının Zorluğu
Cross-document view transitions, web sitelerinde sayfalar arası geçişleri akıcı hale getiren güçlü bir özelliktir. Ancak, küçük bir örnekle başlayıp ardından ürün listeleme sayfası gibi çok sayıda eleman içeren bir yapıya geçtiğinizde işler karmaşıklaşır. Her bir elemana benzersiz bir view-transition-name atamak zorunda kaldığınızda, CSS kodunuz yönetilemez hale gelir. İşte bu noktada ölçeklenebilir bir yaklaşıma ihtiyaç duyarsınız.
Önceki Yazımızdan Hatırlatmalar: Kaçınılması Gereken Tuzaklar
Geçen yazımızda, cross-document view transitions kullanırken karşılaşılan yaygın sorunları ele almıştık: Sessizce işe yaramayan eski meta etiketi, geçişleri habersizce sonlandıran 4 saniyelik zaman aşımı, görüntü oranı değişikliklerinde oluşan bozulmalar ve pagereveal/pageswap olaylarıyla geçiş yaşam döngüsüne müdahale etme yöntemleri. Bu bilgiler, “hiçbir şey çalışmıyor” noktasından “bir eleman iki sayfa arasında güzelce geçiş yapıyor” noktasına gelmenizi sağlar. Ancak bu, yalnızca geçici bir rahatlamadır.
Gerçek Sorun: Yüzlerce Elemanı Ölçeklemek
Bir ürün listeleme sayfasında 48 kart bulunduğunu ve her bir kartın ayrıntı görünümüne dönüşmesi gerektiğini düşünün. Bu noktada, her kart için ayrı bir view-transition-name tanımlamak ve her birine özel animasyon stilleri yazmak zorunda kalırsınız. Bu, CSS’inizde yüzlerce seçiciden oluşan bir duvar yığınına yol açar. İşte asıl zorluk burada başlar. Bu yazıda, bu ölçeklenebilirlik sorununu nasıl çözebileceğimizi inceleyeceğiz.
Hayal: Tek Satır CSS ile Sonsuz Benzersiz İsim
Mükemmel bir dünyada, bu ölçeklenebilirlik sorununu yalnızca CSS ile çözebiliriz. Hiç JavaScript, hiç sunucu tarafı döngü olmadan. Aşağıdaki gibi bir kural yeterli olacaktır:
.card {
view-transition-name: ident("card-" sibling-index());
}Burada ident() — Chrome üzerinde çalışan Bramus tarafından CSS Çalışma Grubu'na önerilen bir CSS fonksiyonudur. Metin, sayı veya diğer tanımlayıcıları alır, bunları birleştirir ve geçerli bir CSS adı üretir. Bunu sibling-index() ile eşleştirdiğinizde (bir elemanın kardeşleri arasındaki konumunu 1, 2, 3… olarak döndüren fonksiyon), bir listedeki her eleman için otomatik olarak benzersiz adlar elde edersiniz. Tek bir kural, 10 kart için de 10.000 kart için de çalışır. CSS bu durumdan etkilenmez.
Bu yaklaşım yalnızca view transitions için geçerli değildir. Aynı desen scroll-timeline-name, container-name, view-timeline-name gibi ölçeklenebilir benzersiz tanımlayıcılar gerektiren her yerde kullanılabilir. Hatta isimleri doğrudan HTML’den de çekebilirsiniz.
ident() ve sibling-index() Fonksiyonlarının Potansiyeli
ident() fonksiyonu, dizeleri, tamsayıları veya diğer tanımlayıcıları birleştirerek geçerli bir CSS tanımlayıcısı oluşturur. sibling-index() ise bir elemanın kardeşleri arasındaki sırasını döndürür (1’den başlayarak). Bu iki fonksiyon birlikte kullanıldığında, her bir liste elemanına otomatik olarak card-1, card-2, card-3 gibi benzersiz isimler atanır. Bu sayede, eleman sayısı artsa bile CSS kodunuz aynı kalır ve herhangi bir elle müdahale gerekmez.
Sonuç
Cross-document view transitions, web tasarımında kullanıcı deneyimini iyileştirmek için güçlü bir araçtır. Ancak, çok sayıda eleman içeren sayfalarda ölçeklenebilirlik sorunuyla karşılaşmak kaçınılmazdır. ident() ve sibling-index() gibi önerilen CSS fonksiyonları, bu sorunu tek bir satır kodla çözme potansiyeli sunar. Bu yaklaşım, yalnızca view transitions için değil, aynı zamanda diğer CSS özelliklerinde benzersiz tanımlayıcılar gerektiren her durumda kullanılabilir. KOBİ web siteleri için bu tür modern CSS teknikleri, hem geliştirme sürecini hızlandırır hem de kullanıcıya akıcı ve profesyonel bir deneyim sunar.