Chrome 147, öğe kapsamlı görünüm geçişleriyle eşzamanlı ve iç içe görünüm geçişlerini etkinleştiriyor

Bramus

Yayınlanma tarihi: 27 Mart 2026

Chrome 147, Element.startViewTransition() çağrılarak DOM'un bir alt ağacında görünüm geçişi başlatmanıza olanak tanıyan bir özellik olan öğe kapsamlı görünüm geçişlerini kullanıma sunuyor.

Bu özellik, birden fazla görünüm geçişinin aynı anda çalışmasını sağlar, devam eden görünüm geçişlerini iç içe yerleştirmenize olanak tanır ve sayfanın geri kalanını etkileşimli tutarken position: fixed içeriklerle ilgili katman oluşturma sorunlarını çözer.

Neler değişti?

Chrome 140'ta geliştirici testine hazır olduğunu duyurduğumuzdan beri, ayrıntıları (özellikle varsayılan davranışlarla ilgili) netleştirmek için topluluk ve CSS Çalışma Grubu ile işbirliği yaptık:

  • Kapsam kökleri varsayılan olarak kendi kendine katılır.
  • Kapsamlı görünüm geçişleri, iç içe yerleştirilmiş görünüm geçişi grupları kullanılarak iç içe yerleştirilmiş sözde öğelerini otomatik olarak içerir.
  • Kapsamlı bir görünüm geçişindeki ::view-transition-group-children() sözde öğesi, kapsam kökü taşmayı kırpıyorsa içeriklerini otomatik olarak kırpar.
  • Öğe kapsamlı görünüm geçişleri, geçiş sırasında contain: layout ve view-transition-scope: all öğelerini kapsam köküne otomatik olarak uygular.

Bu güncellemelerden sonra, öğe kapsamlı görünüm geçişleri 147 sürümünden itibaren Chrome'un kararlı sürümü'nda kullanılabilir.

Demolar

Listeleri karıştırma

Bu demo, her listedeki öğeleri karıştırmanıza olanak tanır. Ortadaki düğmeyi seçerek listelerin yerini de değiştirebilirsiniz.

Canlı Demo

Demo Kaydı

Öğe kapsamlı görünüm geçişleri kullanıldığından her iki liste de karıştırma görünümü geçişlerini aynı anda çalıştırabilir. Liste öğeleri yeniden düzenlenirken listelerin konumlarını değiştiren dış görünüm geçişini de başlatabilirsiniz.

Patagonya gezim

"My Patagonia Trip" demosunda, öğe kapsamlı görünüm geçişleri gösterilmektedir. Bu demo, "Web kullanıcı deneyimi, yeniden tasarlandı" kampanyası videosuna dayalı olarak oluşturulmuştur.

Izgara öğelerini filtrelemek için açılır listeleri kullanın. Her bir ızgara öğesini kenar çubuğunda görünen seçili öğeler listesine eklemek için Ekle düğmesini kullanın.

Canlı Demo

Tam demoyu görüntülemek için "My Patagonia Trip" (Patagonya Gezim) başlıklı dokümanı ayrı bir sekmede açın.

Demo Kaydı

Demoda, öğe kapsamlı görünüm geçişleri üç yerde kullanılıyor:

  • Öğeler filtrelenirken gösterilen ızgara.
  • Seçilen öğeler listesine eklenen ızgara öğeleri.
  • Seçilen öğelerin listesini gösteren kenar çubuğu.

Kılavuzu okuyun

Öğe kapsamlı görünüm geçişleri hakkında her şeyi öğrenmek için rehberi okuyun. Bu makalede, öğe kapsamlı görünüm geçişlerinin nasıl uygulanacağı gösterilmekte, ek ayrıntılar açıklanmakta ve daha fazla demo yer almaktadır.

Öğe kapsamlı görünüm geçişleri kılavuzunu okuyun