View Transition API, web geliştirmede devrim niteliğinde bir gelişmedir. Web siteniz tek sayfalı veya çok sayfalı olsun, bu güçlü API, görünümler arasında sorunsuz geçişler oluşturmanıza olanak tanır. Bu da kullanıcıları büyüleyen yerel benzeri deneyimler sağlar. Şu anda Chrome'da kullanılabilen bu özellik, yakında Safari'de de kullanıma sunulacaktır.
Görüntüleme Geçişi API'si'ni daha fazla kullanıcı incelemeye başladığından, bazı yanlış bilgilerin düzeltilmesinin zamanı geldi.
Yanlış kanı 1: View Transition API ekran görüntüsü alır
Bir görüntüleme geçişi çalıştırırken API, içeriğin eski ve yeni durumunun anlık görüntüsünü alır. Ardından bu anlık görüntüler, belgelerin "Bu geçişler nasıl çalışır?" bölümünde açıklandığı şekilde animasyonlu hale getirilir.
Eski anlık görüntü için ekran görüntüsü terimini kullanabilirsiniz. Yeni anlık görüntü ise ekran görüntüsü değil, düğümün canlı bir temsilidir. Bunu, değiştirilmiş bir öğe olarak düşünün.
::view-transition
└─ ::view-transition-group(root)
└─ ::view-transition-image-pair(root)
├─ ::view-transition-old(root) 👈 Screenshot
└─ ::view-transition-new(root) 👈 Live representation
Bu canlı yayın özelliği sayesinde bunun gibi demolar işe yarıyor: Yeni anlık görüntüden elde edilen video, görüntüleme geçişi sırasında oynatılmaya devam ediyor.
Bunun için kullanılan mantık ve CSS, belgelerimizde ayrıntılı olarak açıklanmıştır.
Yanlış kanı 2: Birden fazla öğe yakalanırsa birden çok görünüm geçişi çalışır
Birden fazla öğe yakaladığınızda anlık görüntü alma işlemi, tüm eski ve yeni durumları yakalar. :root öğesine ek olarak bir .box yakaladığınızda şu sözde ağacı elde edersiniz:
::view-transition
└─ ::view-transition-group(root)
| └─ ::view-transition-image-pair(root)
| ├─ ::view-transition-old(root)
| └─ ::view-transition-new(root)
└─ ::view-transition-group(box)
└─ ::view-transition-image-pair(box)
├─ ::view-transition-old(box)
└─ ::view-transition-new(box)
Bu ağaç birden fazla anlık görüntü çifti içerse de yalnızca tek bir görünüm geçişi çalıştırılır.
Chrome şu anda aynı anda doküman başına bir görünüm geçişi çalıştırmakla sınırlıdır. Yeni bir görünüm geçişi başlatmak için bu demoda hızlıca tıklamayı deneyin. Yeni bir geçiş başladığında devam eden geçişin sona atlandığını fark edersiniz.
Yanlış kanı 3: Tarayıcı desteği nedeniyle görünüm geçişlerini uygulayamazsınız
Birçok geliştirici, yalnızca Chrome'da desteklendikleri için görüntü geçişlerini uygulayamamaktan endişe duyuyor. Safari'nin bu sorun üzerinde çalıştığı ve yakında çıkacak Safari 18 sürümüne bu özelliği ekleyeceği iyi bir haberimiz var.
Ancak kesintili tarayıcı desteğinin bugün görünüm geçişlerini uygulamanızı engellemesine izin vermeyin. Görüntü geçişleri, kademeli geliştirme için mükemmel bir materyaldir. Orijinal dokümanda bu metodolojiyi kodunuza ekleme yöntemi paylaşılmaktadır.
function handleClick(e) {
// Fallback for browsers that don't support this API:
if (!document.startViewTransition) {
updateTheDOMSomehow();
return;
}
// With a View Transition:
document.startViewTransition(() => updateTheDOMSomehow());
}
Tarayıcınız aynı doküman görünüm geçişlerini destekliyorsa zenginleştirilmiş, animasyonlu sürümü görürsünüz. Tarayıcınız bu özelliği desteklemiyorsa mevcut deneyimi alırsınız. Zaman içinde, görüntüleme geçişlerini destekleyen tarayıcıların sayısı arttıkça daha fazla kullanıcı bu zenginleştirilmiş sürümü otomatik olarak deneyimleyecektir.
Aynı durum dokümanlar arası görünüm geçişleri için de geçerlidir. Bu özellikleri desteklemeyen tarayıcılar, stil sayfalarını ayrıştırırken CSS etkinleştirme seçeneğini yoksayar.
Bu yaklaşım, bu örnek olayda ayrıntılı olarak açıklandığı gibi e-ticarette başarıyla uygulandı.
4. Yanlış bilgi: Görüntü geçişleri artımlı oluşturmayı bozar
Görüntü geçişlerinin artımlı oluşturmayı bozduğuna dair iddialar var. Bu doğru değildir: Doküman arası görüntüleme geçişleri, web'in bu temel özelliğini bozmayacak şekilde belirtilmiştir.
Tarayıcılar, "yeterli" içeriğe sahip olduklarında sayfayı oluşturmaya başlar. Bu işlem, çoğu tarayıcıda <head> içindeki tüm stil sayfalarının yüklenmesi, <head> içindeki oluşturmayı engelleyen tüm JavaScript'in ayrıştırılması ve yeterli işaretlemenin yüklenmesi sonrasında gerçekleşir. Belgeler arası görünüm geçişleri bu durumu değiştirmez: İlk Contentful Paint için gereken içerik değiştirilmez. Bu ilk oluşturma işleminden sonra tarayıcı, yeni alınan içeriği artımlı olarak oluşturabilir ve oluşturacaktır.
DOM'da belirli bir öğe bulunana kadar oluşturmayı engellemeyi seçebilirsiniz. Bu, görünüm geçişine katılan öğelerin yeni sayfada mevcut olduğundan emin olmak istediğiniz durumlarda kullanışlıdır.
Bunun için şu bağlantı etiketini kullanın:
<link rel="expect" blocking="render" href="#elementId">
Bu, tarayıcının ilk oluşturma işlemini ne zaman gerçekleştireceğine karar vermek için kullandığı sezgisel kuralları geçersiz kılar: İlk oluşturma işlemi, belirtilen öğe DOM ağacında bulunana kadar ertelenir.
Bu manuel engelleme işleminde bazı güvenlik önlemleri vardır. Örneğin, kapanış </html> etiketi görüldüğünde ancak engelleyen öğe görülmediğinde artık oluşturma işlemi engellenmez. Ayrıca, engelleme özelliğini istediğiniz zaman kaldıran kendi zaman aşımı mantığınızı da ekleyebilirsiniz.
Oluşturmayı engelleme özelliğinin dikkatli bir şekilde kullanılması gerektiği açıktır. Oluşturmayı engellemenin etkisi, tek tek örnekler ele alınarak değerlendirilmelidir. Performans metrikleriniz üzerindeki etkiyi ölçerek kullanıcılarınız üzerindeki etkisini aktif olarak ölçemediğiniz ve ölçemediğiniz sürece varsayılan olarak blocking=render kullanmamaya çalışın.
5. Yanılgı: Anlık görüntü alma işlemi yavaş veya pahalıdır
View Transition API, yeni görünümü hazırlayıp anlık görüntülerini alırken eski görünüm kullanıcı tarafından görülebilir durumda kalır. Bu nedenle, kullanıcılar eski sayfayı görüntü geçişi olmadan gösterildiğinden biraz daha uzun süre görür. Ancak bu gecikme, gerçekte yalnızca birkaç kare olduğundan önemsizdir. Chrome'da, örneğin pageswap'ün etkisi en fazla iki eski karedir: Mantığı yürütmek için bir kare ve anlık görüntülerin birleştirildiğinden ve önbelleğe alındığından emin olmak için bir ek kare.
Ayrıca, anlık görüntü verilerinin doğrudan birleştiriciden alınması nedeniyle anlık görüntü verilerini almak için ek düzen veya yeniden boyama adımları gerekmez.
Bonus Yanlış Anlama: Görüntüleme Geçişleri API'si
Kullanıcılar görüntüleme geçişlerinden bahsederken genellikle "Görüntüleme Geçişleri API'sinden" bahseder. Bu yanlış. API, "Görüntüleme Geçişi API'si" olarak adlandırılır. "Geçiş" kelimesinin tekil olduğunu unutmayın.
Bu yanılgı, bazı makalelerden (bir noktada DCC ile ilgili kendi dokümanlarımız dahil) yanlış terimin kullanılmasından kaynaklanmaktadır.
Doğru adı hatırlamanın püf noktası, (bir veya daha fazla) görünüm geçişi oluşturmak için (bir) View Transition API'yi kullanmaktır.