Chrome 133 sürümünde kullanıma sunulan ve DOM'da öğeleri durumunu kaybetmeden taşımayı kolaylaştıran yeni moveBefore() DOM API'yi duyurmanın heyecanını yaşıyoruz. Bu özelliği projenizde nasıl kullanabileceğinizi öğrenmek için okumaya devam edin.
DOM mutasyonları sırasında durum kaybı
DOM'a yeni öğeler eklemek için appendChild() API'yi mi kullanıyorsunuz? Birçok kişi de öyle. Ancak bu API'yi veya insertBefore()'ü ya da bu bağlamda başka bir ekleme API'sini DOM'da zaten mevcut bir öğeyle çağırmayı denediniz mi? Bu durumda, öğenin önce eski üst öğesinden kaldırılıp yenisine yeniden eklenmesiyle bu işlemin sessizce çalıştığını fark etmemiş olabilirsiniz. Bunun nedeni, ilk DOM Standart taslağı 1998'de kullanıma sunulduktan sonra Document Object Model'de yalnızca remove ve insert primitiflerinin bulunmasıdır. DOM'da bir öğeyi bir yerden başka bir yere "taşıdığınızı" düşündüğünüzde aslında öğeyi kaldırıp eklemişsinizdir.
"Taşıma" işleminin aslında "kaldırma ve ekleme" işlemi olması genellikle kullanıcı deneyimini etkilemez. Örneğin, bir <p> öğesini DOM'da "taşırken" bu iki işlemin rahatsız edici yan etkileri olmaz. Ancak önemli durum bilgisi içeren karmaşık düğümler (ör. <iframe> öğeleri, tam ekrandaki öğeler, CSS animasyonları vb.) taşınırken, gizli "kaldırma" işlemi her türlü durumu sıfırlar.
Bu durum, şaşırtıcı derecede rahatsız edici yan etkilere neden olabilir.
DOM ağacında hareketlerle oynayarak durum korumalı demo web sitemizde sıfırlanan durum türünü görebilirsiniz. Aşağıdaki örnekte, öğeler bir üst kapsayıcıdan diğerine taşınırken CSS animasyonlarının ve <iframe> durumunun sıfırlanması gösterilmektedir.
Bu sınırlama, dinamik kullanıcı deneyimleri oluşturmayı zorlaştırabilir veya imkansız hale getirebilir. Uygulama durumu gizemli bir şekilde sıfırlandığında kullanıcılar can sıkıcı bir durumla karşılaşır ve kafaları karışır. JavaScript çerçevesi yazarları ise bu sorunun yükünü üstlenerek sayısız saat boyunca bu soruna odaklanarak ön uç kodlarını yeniden tasarlar, MorphDOM gibi karmaşık kitaplıklar yazar veya düzeltemedikleri sorunları vurgulayan hata raporları alır.
Yeni moveBefore() API'si
DOM'a yeni bir ilkel işlem ekleyerek bu sorunu düzeltmeye karar verdik. "Taşıma" ilkel adı verilen bu API, yeni moveBefore() DOM API aracılığıyla geliştiricilere sunulur.
moveBefore(), insertBefore() ile aynı bağımsız değişkenleri alır ancak bu yeni API, DOM'a zaten eklenmiş düğümleri kaldırıp yeniden eklemek yerine, hedef düğümü çoğu durumu sıfırlamadan yeni üst öğeye atomik olarak taşır. Bu sayede JavaScript geliştiricileri, hareketli animasyonlar, iFrame'ler, tam ekran öğeler ve daha fazlasını kullanarak dinamik deneyimler oluşturabilir. chrome://flags/#atomic-move deneysel işaretini etkinleştirip demo sitemizi ziyaret ederek veya 4 Şubat 2025'te kullanıma sunulacak Chrome 133 sürümünü kullanarak bu özelliği kendiniz deneyebilirsiniz.
Bu yeni ilkel öğenin JavaScript yazarlarının elde etmesine olanak tanıyacağı davranışlara örnekler:
- Kullanıcı bir web sitesinde gezinirken videonun oynatma durumunu koruma (video,
<video>veya<iframe>öğesinden sağlanmış olsun). - DOM'da taşınırken kullanıcı giriş alanının odağını koruma
- DOM'ye yeni içerik eklenirken veya DOM'den içerik kaldırılırken animasyonların sorunsuz bir şekilde tamamlanmasına izin verin.
- Mevcut DOM'ları yeni içerikle uyumlu hale getirmek için daha yüksek kaliteli dönüşüm algoritmaları.
- Kalıcı iletişim kutularını, pop-up'ları ve tam ekran öğeleri açık tutun.
Bu API'yi diğer tarayıcılarla birlikte web platformuna sunmak için yoğun şekilde çalışıyoruz. Yıllardır geliştiricilerin taleplerini karşılamak ve web platformundaki önemli bir boşluğu doldurmak için bu API'yi yakında geliştiricilerin kullanımına sunacağımız için heyecanlıyız.
Her zaman olduğu gibi, Twitter üzerinden veya aşağıdaki yorumlar bölümünden düşüncelerinizi bizimle paylaşın ve crbug.com/new adresinden hata bildirimleri gönderin.