Chrome 64'teki yenilikler

Pete LePage

Ü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.

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ılan preload değeri artık metadata 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çin Request.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!