Firefox ve Görünüm Geçişleri: Ekran Değişirken İçerik Ne Olur?

Bir kütüphane sitesinde kitap listesini süzüyorsunuz. Bir düğmeye bastığınızda liste bir anda değişiyor; az önce baktığınız başlığın nerede kaldığını yeniden arıyorsunuz. Aynı değişiklik, eski düzenle yeni düzen arasında kısa bir görsel geçişle de sunulabilir. Ancak ekranda hareket görmek, verinin doğru değiştiği anlamına gelmez. Web arayüzü tasarımındaki asıl mesele, gerçek içerik güncellemesini onu gösteren animasyondan ayırmak ve ikisinin birlikte anlaşılır çalışmasını sağlamaktır. Görünüm geçişleri için geliştirilen tarayıcı arayüzü, bu ayrımın somut bir örneğini sunar.

Mozilla'nın sürüm notları, Firefox 144.0'ın 14 Ekim 2025'te yayımlandığını ve View Transitions API'nin birinci düzeyini desteklediğini doğrular. Bu yazı, 13 Ekim 2026 bilgi kesim tarihiyle bu tarihli duyuruyu ve kesim tarihinden önce güncellenmiş MDN teknik belgelerindeki temel mekanizmayı ele alır. Bir destek duyurusu, webdeki bütün sitelerin özelliği kullandığı veya her cihazda aynı animasyonun çalıştığı anlamına gelmez. İncelenen şey, belirli bir tarayıcı sürümünde duyurulmuş olanak ile onu kullanmanın içerik açısından ne anlama geldiğidir. [1]

Görünüm, belge ve veri aynı şey değildir

Bir web sayfasının görünümü, ekranda o anda gördüğümüz düzenidir. Belgenin yapısı ise düğmeler, başlıklar ve diğer öğeler arasındaki ilişkileri içerir. DOM adı verilen yapı bu ilişkilerin programla işlenebilmesini sağlar. Bir kitap listesinin süzülmesi, aynı belge içinde bu yapının değiştirilmesiyle yapılabilir. Başka bir adrese gidilip yeni belge yüklenmesi ise farklı bir işlemdir. MDN, görünüm geçişlerini hem aynı belge içindeki durum değişimleri hem de belgeler arası gezinme için açıklasa da bunları ayrı kullanım biçimleri olarak ele alır. [2]

Bu yazı özellikle aynı belge içindeki temel örneğe odaklanır. Kütüphane sahnesinde kullanıcının amacı animasyon izlemek değil, istediği kitapları bulmaktır. Dolayısıyla listede hangi öğelerin bulunduğu ve hangi düğmenin ne yaptığı, geçişin görsel biçiminden bağımsız olarak doğru kalmalıdır. Bir başlığın kayarak yeni yerine gelmesi, listenin doğru süzüldüğünün kanıtı değildir. Görsel süreklilik bir sunum özelliğidir; uygulamanın iş kuralı başka bir katmanda yer alır. Bu ayrımı korumak, animasyonu gereksiz saymak değil, ona doğru işi vermektir.

Eski görünümden yeni duruma

MDN'nin yöntem açıklamasına göre Document.startViewTransition() aynı belge içinde bir görünüm geçişi başlatır ve geçişi temsil eden bir nesne döndürür. İçeriği güncelleyen bir geri çağırım işlevi kullanılabilir. Tarayıcı önce mevcut sayfanın anlık görüntüsünü alır; sonra güncelleme işlevini çağırır. İşlevin döndürdüğü söz, yani Promise, başarıyla tamamlandığında geçiş sonraki karede başlar. Söz reddedilirse geçiş terk edilir. Buradaki işlem sırası, eski görünümün ne zaman kaydedildiği ile yeni içeriğin ne zaman oluşturulduğunu birbirine bağlar. [3]

Kitap örneğinde bu sıralama şöyle düşünülebilir: Önce mevcut listenin görünümü vardır; ardından süzme işlemi gerçek listeyi değiştirir; sonra eski ve yeni görünüm arasındaki sunum gerçekleşir. Bu, çalışan bir uygulamanın ölçülmüş sonucu değil, yöntemi açıklayan tasarım örneğidir. İşlevin kitapları sunucudan getirmesi gerekiyorsa, başarılı bir güncelleme ile başarısız veri isteğini ayırmak yine uygulamanın sorumluluğudur. Animasyon mekanizması eksik kitabı kendiliğinden bulmaz, yanlış veriyi düzeltmez ve sunucunun yanıtını hızlandırdığını garanti etmez.

İki canlı kopya yerine görsel temsiller

MDN'nin genel açıklaması, eski ve yeni içeriğin birlikte DOM'da tutulmasının odak karışıklığı, okuma konumunun kaybı ve canlı bölge duyurularında sorunlar yaratabileceğini belirtir. Görünüm geçişi mekanizmasında eski görünümün sabit anlık görüntüsü ile yeni görünümün temsili için özel görsel yapılar bulunur. Bunlar geçişin görünüşünü düzenlemek için kullanılır. Amaç, geliştiricinin her geçişte iki ayrı canlı içerik ağacını elle yönetmesini temel çözüm olarak almak zorunda kalmamasıdır. [2]

Bir katalog ekranında iki canlı düğme takımı kalmış olsaydı, hangisinin gerçek durumu temsil ettiği ayrıca çözülmesi gereken bir soru olurdu. Bu varsayımsal örnek, görüntü ile etkileşimli içerik arasındaki farkı anlatır. Bir görünümün resim gibi sunulması, onun bütün düğmelerinin aynı anda ikinci kez işlevsel olması demek değildir. Bu yüzden geçişin gösterdiği katmanlarla belgenin gerçek yapısını aynı şey saymamak gerekir. Görsel temsil, uygulamanın durum değişimini göstermek için vardır; iki ayrı uygulama durumu yaratmak için değil.

Bütün ekranın değişmesi gerekmiyor

MDN, belirli öğelerin geçişe ayrı katılmasını sağlayan view-transition-name özelliğini açıklar. Böylece seçilmiş bir öğenin görünümü, sayfanın geri kalanından ayrı biçimde ele alınabilir. Kütüphane örneğinde bu, tek bir kartın yer değiştirmesiyle bütün sayfanın tek parça kayması arasındaki tasarım farkını düşünmemize yardım eder. Ancak adlandırma tek başına iyi tasarım sağlamaz. Hangi öğenin aynı öğe olarak izlenmesi gerektiği, neyin değiştiği ve kullanıcının hangi eylemi yaptığı anlaşılır biçimde belirlenmelidir. [2]

Geçişin süresi de içeriğin önemini değiştirmez. Bir filtre işlemi yalnızca birkaç satırın görünmesini değiştiriyorsa, gösterişli ve uzun bir hareket gerekmeyebilir. Bu bir tasarım değerlendirmesidir, burada bildirilmiş bir kullanıcı deneyinin sonucu değildir. Benzer biçimde bütün ekranı hareket ettirmek her zaman daha anlaşılır olmaz. Görsel araçların hangi bilgiyi taşıdığı sorusu, onlardan kaç tane kullanıldığı sorusundan daha yararlıdır. Geçiş, kullanıcıya eski durumla yenisi arasındaki ilişkiyi gösterecekse, bu ilişkinin ne olduğu önce açık olmalıdır.

Animasyon olmadığında iş devam edebilmeli

MDN'nin temel kullanım örneği, tarayıcı desteğini kontrol eder; destek yoksa aynı içerik güncellemesini animasyon olmadan uygular. Bu yaklaşımın önemi, işlevin görsel etkiye bağımlı olmamasıdır. Kitap süzme işlemi, geçiş desteği olmayan bir tarayıcıda da anlamlı sonuç üretebilmelidir. Buradaki “destek yok” yolu, yanlış veri sunan ikinci sınıf bir yol değildir; aynı uygulama işinin daha sade görünüşle yürütülmesidir. Ekranın nasıl değiştiği ile hangi sonuca ulaşıldığı yeniden ayrılır. [3]

MDN ayrıca geçiş nesnesiyle animasyonun belirli durumlara göre atlanabildiğini açıklar. Bunun yanında geliştiricinin klavye kullanımı, odak konumu ve okunabilirlik gibi davranışları gerçek arayüz üzerinde kontrol etmesi gerekir. Bir tarayıcı özelliğinin varlığı, uygulamadaki her erişilebilirlik sorununun otomatik olarak çözüldüğünü göstermez. Geçiş eklenmiş bir kitap listesinde, kullanıcının hangi öğeyle çalıştığını koruyabilmesi en az hareketin akıcılığı kadar önemlidir. Bu yazı herhangi bir sitenin bu kontrollerden geçtiğini iddia etmez. [2]

Kanıta dayalı sonuç: Duyuru ile deneyimi ayırmak

Firefox 144.0 sürüm notu, tarihli ürün desteğini doğrulayan kaynaktır. MDN belgeleri ise aynı belge içindeki geçişin anlık görüntü, içerik güncellemesi ve görsel sunum ilişkisini açıklar. Genel API belgelerinde daha geniş kullanım biçimleri bulunması, Firefox 144'ün bu geniş ailenin bütün özelliklerini desteklediği diye okunmamalıdır. Bu yazı, duyurulan birinci düzey ile temel aynı belge mekanizmasına odaklanır; bütün tarayıcıların uyumluluk tablosunu veya herhangi bir performans deneyini bağımsız olarak ölçmez. [1][2][3]

En sağlam teknoloji değerlendirmesi, animasyonu uygulamanın doğruluğuyla karıştırmamaktır. İçeriğin doğru güncellenmesi, başarılı veya başarısız işlemlerin anlaşılması, destek olmayan durumda işin sürmesi ve gerçek kullanıcı etkileşiminin denetlenmesi ayrı sorumluluklardır. Görünüm geçişi bu yapının sunum parçasını kolaylaştırabilecek bir araçtır. Kütüphane listesindeki bir kartın kayması ancak doğru kart doğru yerde kaldığında anlam kazanır. Ekranın akıcı değişmesi güzel olabilir; esas değer, değişikliğin ne olduğunu kullanıcının kaybetmeden izleyebilmesidir.

Kaynaklar ve lisans notu

1. Mozilla, Firefox 144.0 sürüm notları, 14 Ekim 2025. Bu yazıda yalnızca tarih ve View Transitions API Level 1 desteğine ilişkin sınırlı duyuru kullanılmıştır.
2. Mozilla Contributors, MDN, “View Transition API”. Aynı ve farklı belge ayrımı, görsel temsiller, öğe adlandırması ve geçişi atlama açıklamaları. Erişilen sayfanın son değişiklik tarihi 28 Eylül 2026'dır.
3. Mozilla Contributors, MDN, “Document: startViewTransition() method”. Anlık görüntü, geri çağırım, Promise ve animasyonsuz alternatif; son değişiklik 19 Haziran 2026.
4. MDN, “Attribution and copyright licensing”. MDN açıklamaları bu makalede yeniden düzenlenmiş ve özgün Türkçe anlatımla değerlendirilmiştir; kod veya görsel kopyalanmamıştır. Mozilla Contributors'a atıf verilir. Bu makale CC BY-SA 4.0 kapsamında sunulur; MDN belgeleri CC BY-SA 2.5 veya sonraki sürüm kapsamındadır.