ResizeObservers
desteği, bir öğenin içerik dikdörtgeninin boyutu değiştiğinde sizi bilgilendirir.- Modüller artık import.meta üzerinden belirli meta verileri barındırmaya erişebilir.
- Pop-up engelleyici güçlenir.
window.alert()
artık odağı değiştirmiyor.
Üstelik çok daha fazlası da var!
Ben Pete LePage. Şimdi Chrome 64'teki geliştiricilere yönelik yenilikleri görelim!
Değişikliklerin tam listesini görmek ister misiniz? Chromium kaynak deposu değişiklik listesine göz atın.
ResizeObserver
Bir öğenin boyutu değiştiğinde bunu takip etmek zahmetli olabilir. Büyük olasılıkla, dokümanın resize
etkinliğine bir işleyici ekler ve ardından getBoundingClientRect
veya getComputedStyle
yöntemini çağırırsınız. Ancak bunların ikisi de düzen karmaşasına
neden olabilir.
Tarayıcı penceresinin boyutu değişmediği halde dokümana yeni bir öğe eklendiğinde ne olur? Yoksa bir öğeye display: none
eklediniz mi? Bunların ikisi de sayfadaki diğer öğelerin boyutunu değiştirebilir.
ResizeObserver
, bir öğenin boyutu değiştiğinde sizi bilgilendirir ve öğenin yeni yüksekliğini ve genişliğini sağlayarak düzenin bozulma riskini azaltır.
Diğer Gözlemciler gibi bunu kullanmak oldukça basittir. Bir ResizeObserver
nesnesi oluşturun ve kurucuya bir geri çağırma iletin. Geri çağırmaya, öğenin yeni boyutlarını içeren ResizeOberverEntries
dizisi (gözlenen öğe başına bir giriş) verilir.
const ro = new ResizeObserver( entries => {
for (const entry of entries) {
const cr = entry.contentRect;
console.log('Element:', entry.target);
console.log(`Element size: ${cr.width}px × ${cr.height}px`);
console.log(`Element padding: ${cr.top}px ; ${cr.left}px`);
}
});
// Observe one or multiple elements
ro.observe(someElement);
Daha ayrıntılı bilgi ve gerçek hayattan örnekler için ResizeObserver
: Elements için document.onresize
'e göz atın.
Geliştirilmiş Pop-up Engelleyici
Sekme arkasını hiç sevmem. Bildiğiniz gibi bu, bir sayfanın bir hedefe yönlendiren pop-up'ı açması VE sayfada gezinmesidir. Genellikle bunlardan biri bir reklam veya istemediğiniz bir şeydir.
Chrome 64'ten itibaren bu tür gezinmeler engellenecek ve Chrome kullanıcıya bazı yerel kullanıcı arayüzleri göstererek, isterlerse yönlendirmeyi izlemelerine olanak tanıyacak.
import.meta
JavaScript modülleri yazarken, çoğu zaman mevcut modülle ilgili ana makineye özel meta verilere erişmek istersiniz. Chrome 64 artık modüller içindeki import.meta
özelliğini destekliyor ve modülün URL'sini import.meta.url
olarak gösteriyor.
Bu, kaynakları mevcut HTML belgesi yerine modül dosyasına göre çözümlemek istediğinizde gerçekten faydalıdır.
Diğer ölçütler
Bunlar, geliştiriciler için Chrome 64'te yapılan değişikliklerden sadece birkaçı, tabii ki çok daha fazlası var.
- Chrome artık normal ifadelerde adlandırılmış yakalamaları ve Unicode özellik çıkışlarını destekliyor.
<audio>
ve<video>
öğeleri için varsayılanpreload
değeri artıkmetadata
oldu. Bu, Chrome'u diğer tarayıcılarla uyumlu hale getirir ve ortamın kendisini değil, yalnızca meta verileri yükleyerek bant genişliği ve kaynak kullanımını azaltmaya yardımcı olur.- Artık
Request
öğesinin önbellek modunu görüntülemek ve isteğin yeniden yükleme isteği olup olmadığını belirlemek içinRequest.prototype.cache
kullanabilirsiniz. - Focus Management API'yi kullanarak
preventScroll
özelliğiyle bir öğeye kaydırma yapmadan odaklanabilirsiniz.
window.alert()
Ve bir soru daha. Bu aslında bir "geliştirici özelliği" olmasa da
beni mutlu ediyor. window.alert()
artık arka plan sekmesini ön plana çıkarmıyor! Bunun yerine, kullanıcı söz konusu sekmeye geri döndüğünde uyarı gösterilir.
Bana bir window.alert
tetiklediğinden artık rastgele sekme değiştirme yok.
Eski Google Takvim'e bakıyorum.
YouTube kanalımıza abone olmayı unutmayın. Yeni bir video sunduğumuzda e-posta bildirimi alırsınız.
Ben Pete LePage. Chrome 65 yayınlanır yayınlanmaz, size Chrome'daki yenilikleri anlatacağım!