ResizeObserver derinlemesine

ResizeObserver ile öğe boyut değişimlerini ve content box size'i öğrenirsin.

ResizeObserver ve contentBoxSize

ResizeObserver bir öğenin boyut değişimlerini izler. Callback bir entries dizisi alır; her entry, izlenen öğenin yeni ölçülerini taşır. Temel kullanımda entry.contentRect genişlik ve yüksekliği verir.

Daha ayrıntılı bilgi için entry.contentBoxSize kullanırsın. Bu alan bir dizidir; her öğe inlineSize (yatay) ve blockSize (dikey) içerir. CSS Box Model'e uygun olarak içeriğin ölçüldüğü kutuyu verir; padding ve border dahil değildir.

borderBoxSize farkı

borderBoxSize ise padding ve border dahil tüm kutuyu ölçer. Yani contentBoxSize yalnızca içerik alanını, borderBoxSize öğenin görünen tüm alanını verir. Bu ayrım, CSS box-sizing ayarına göre değişen mizanpaj hesaplamalarında önemli olur.

Bazı tarayıcılarda devicePixelContentBoxSize da bulunur; bu, yüksek DPI ekranlarda fiziksel piksel cinsinden ölçü verir. Hangisini kullanacağına ihtiyacına göre karar verirsin.

Uygulama box öğesinin genişliğini izle

Bir ResizeObserver oluştur. Callback entries alır; her entry için entry.contentBoxSize[0].inlineSize değerini konsola yaz. box öğesini izle.

Örnek çözümü göster

1. new ResizeObserver((entries) => {...}) ile oluştur.
2. Callback içinde entries'i dolaş ve entry.contentBoxSize[0].inlineSize'ı yazdır.
3. observer.observe(box) ile başlat.

Örnek çözüm:
const observer = new ResizeObserver((entries) => {
  for (const entry of entries) {
    console.log(entry.contentBoxSize[0].inlineSize);
  }
});
observer.observe(box);

Kendini test et

observe çağrısı

observer.____(box);

Cevabı göster

observer.observe(box);

ResizeObserver'da contentBoxSize ile borderBoxSize arasındaki fark nedir?
- contentBoxSize padding dahil, borderBoxSize dahil değil
- İkisi tamamen aynıdır
- contentBoxSize içeriği, borderBoxSize padding ve border dahil tüm kutuyu ölçer
- borderBoxSize yalnızca genişliği verir
Cevabı göster

contentBoxSize içeriği, borderBoxSize padding ve border dahil tüm kutuyu ölçer — Doğru. contentBoxSize içerik alanını, borderBoxSize padding ve border dahil tüm kutuyu ölçer.
ResizeObserverSize alanlarını eşleştir

inlineSize

Yatay içerik ölçüsü
blockSize

Dikey içerik ölçüsü
contentBoxSize

İçerik kutusu
borderBoxSize

Kenarlık kutusu

Sıradaki ders: Reporting API

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler