Chrome 64'teki yenilikler

Pete LePage

Daha birçok özellik de var.

Adım Pete LePage. Chrome 64'te geliştiriciler için neler yeni olduğuna göz atalım.

Değişikliklerin tam listesini görmek ister misiniz? Chromium kaynak deposu değişiklik listesine göz atın.

ResizeObserver

Bir öğenin boyutunun ne zaman değiştiğini takip etmek biraz zor olabilir. Büyük olasılıkla, dokümanın resize etkinliğine bir dinleyici ekler ve ardından getBoundingClientRect veya getComputedStyle işlevini çağırırsınız. Ancak bunların ikisi de düzeni çözebilir.

Tarayıcı penceresinin boyutu değişmediyse ancak belgeye yeni bir öğe eklendiyse ne olur? Yoksa bir öğeye display: none eklediniz mi? Bu iki seçenek 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 sayfa düzeninin bozulma riskini azaltır.

Diğer gözlemciler gibi, bu gözlemcinin kullanımı da oldukça basittir. Bir ResizeObserver nesnesi oluşturun ve yapıcıya bir geri çağırma işlevi gönderin. Geri çağırmaya, gözlemlenen öğe başına bir ResizeOberverEntries giriş dizisi verilir. Bu dizi, öğenin yeni boyutlarını içerir.

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 fazla bilgi ve gerçek hayattan örnekler için ResizeObserver: Elements için document.onresize gibi başlıklı makaleyi inceleyin.

Sekme altlarından nefret ediyorum. Bir sayfanın bir hedefe pop-up açtığı VE sayfaya yönlendirdiği durumlar bunlardır. Genellikle bunlardan biri reklam veya istemediğiniz bir şeydir.

Chrome 64'ten itibaren bu tür gezinmeler engellenir ve Chrome, kullanıcıya bazı yerel kullanıcı arayüzü gösterir. Böylece kullanıcı, isterse yönlendirmeyi takip edebilir.

import.meta

JavaScript modülleri yazarken, genellikle mevcut modülle ilgili ana makineye özel meta verilere erişmek istersiniz. Chrome 64 artık modüllerdeki import.meta özelliğini destekliyor ve modülün URL'sini import.meta.url olarak gösteriyor.

Bu, mevcut HTML dokümanı yerine modül dosyasına göre kaynakları çözmek istediğinizde çok faydalıdır.

Diğer özellikler

Bunlar, geliştiriciler için Chrome 64'te değişikliklerden yalnızca birkaçı. Tabii ki daha birçok şey var.

  • Chrome artık normal ifadelerde adlandırılmış yakalama ve Unicode mülk kaçışları özelliklerini destekliyor.
  • <audio> ve <video> öğeleri için varsayılan preload değeri artık metadata. Bu sayede Chrome diğer tarayıcılarla uyumlu hale gelir ve medyanın kendisini değil, yalnızca meta verilerini yükleyerek bant genişliğini ve kaynak kullanımını azaltır.
  • Artık bir öğenin önbellek modunu görüntülemek ve bir isteğin yeniden yükleme isteği olup olmadığını belirlemek için Request.prototype.cache'ü kullanabilirsiniz.Request
  • Focus Management API'yi kullanarak artık preventScroll özelliğiyle bir öğeye kaydırmadan odaklanabilirsiniz.

window.alert()

Bir şey daha var. Bu aslında bir "geliştirici özelliği" olmasa da beni mutlu ediyor. window.alert() artık arka plan sekmesini ön plana getirmiyor. Bunun yerine, kullanıcı bu sekmeye geri döndüğünde uyarı gösterilir.

Bir şey window.alert gönderdiği için rastgele sekme değiştirmeye son. Eski Google Takvim'i kastediyoruz.

Yeni video yayınladığımızda e-posta bildirimi almak için YouTube kanalımıza abone olun.

Adım Pete LePage. Chrome 65 yayınlanır yayınlanmaz Chrome'daki yenilikleri size bildirmek için burada olacağım.