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ının incelemeye başlamasıyla birlikte, bazı yanlış bilgilerin düzeltilmesinin zamanı geldi.
1. Yanlış bilgi: View Transition API ekran görüntüsü alır
API, görüntüleme geçişi çalıştırırken içeriğin eski ve yeni durumunun anlık görüntülerini 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ı özellik sayesinde bunun gibi demolar işe yarar: Görüntü geçişi gerçekleşirken yeni anlık görüntüden alınan video oynatılmaya devam eder.
Bunun için kullanılan mantık ve CSS, dokümanlarımızda ayrıntılı olarak açıklanmıştır.
2. Yanlış bilgi: Birden fazla öğe yakalamak, birden fazla görüntü geçişinin yapılmasına neden olur
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 aşağıdaki 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.
3. Yanlış bilgi: Tarayıcı desteği nedeniyle görüntü geçişleri 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 dahil edeceğini de belirtmek isteriz.
Ancak yine de, tarayıcı desteğinin eksik olması görüntü geçişlerini hemen uygulamanızı engellemesin. 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 daha fazla tarayıcı görüntüleme geçişlerini destekledikçe daha fazla kullanıcı bu zenginleştirilmiş sürümü otomatik olarak deneyimleyebilecek.
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. Doküman içi görünüm geçişleri bu durumu değiştirmez: İlk Zengin İçerikli Boyama için gereken içerik değişmez. 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 bulunduğ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 oluşturma artık 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 etkisinin durum bazında değerlendirilmesi gerekir. 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ü geçişlerinden bahsederken genellikle "Görüntü 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 yanlış anlama, bir zamanlar DCC ile ilgili kendi dokümanlarımız da dahil olmak üzere bazı makalelerde yanlış terimin kullanılmasından kaynaklanmaktadır.
Doğru adı hatırlamanın püf noktası, (bir veya daha fazla) görüntü geçişi oluşturmak için (bir) görüntü geçişi API'sini kullanmanızdır.