ResizeObserver - alat tangguh baru untuk bekerja dengan kemampuan beradaptasi

Sedikit sejarah

Kueri Elemen

Pengembang sering membutuhkan kemampuan untuk mendesain elemen ketika mereka mengubah ukuran wadah induknya, terlepas dari area tampilan. Permintaan ukuran kontainer memberi mereka kesempatan ini. Contoh penggunaan CSS:
.element : layar media (lebar minimum: 30em) {***}

Mengubah ukuran elemen pemantau menggunakan API ResizeObserver

API ResizeObserver adalah antarmuka untuk mengubah ukuran elemen pelacakan. Ini adalah semacam analog dari window.resize event untuk suatu elemen.

Contoh: mengubah teks saat mengubah ukuran elemen

<h1> size </h1>
<h2> boring text </h2>

const ro = new ResizeObserver(entries => {
    for(let entry of entries){
        const width = entry.contentBoxSize
        ? entry.contentBoxSize.inlineSize
        : entry.contentRect.width

        if(entry.target.tagName === 'H1'){
            entry.target.textContent = width < 1000 'small' : 'big'
        }

        if(entry.target.tagName === 'H2' && width < 500){
            entry.target.textContent = `I won't change anymore`
            ro.unobserve(entry.target) //  ,     500px
        }
    }
})

//       
ro.observe(document.querySelector('h1'))
ro.observe(document.querySelector('h2'))

const resizeObserver = new ResizeObserver((entries, observer) => {
    for(let entry of entries){
        // 
    }
})

for(let entry of entries){
    const width = entry.contentBoxSize
    ? entry.contentBoxSize.inlineSize
    : entry.contentRect.width

    if(entry.target.tagName === 'H1'){
        entry.target.textContent = width < 1000 ? 'small' : 'big'
    }
    ...
}

contentRect muncul pada tahap pengembangan awal dari ResizeObserver dan ditambahkan hanya untuk kepentingan kompatibilitas saat ini. Mungkin di masa depan itu akan dianggap usang.

Pengamatan Elemen

// resizeObserver(target, options)
ro.observe(document.querySelector('h1'))
ro.observe(document.querySelector('h2'))

Model blok

Kapan seorang pengamat mengetahui tentang perubahan?

• Pengamatan dipicu ketika item yang diamati ditambahkan / dihapus dari DOM.
• Pengamatan dipicu ketika properti tampilan elemen yang diamati diatur ke tidak ada.
• Pengamatan tidak bekerja untuk elemen garis "tidak tersubstitusi".
• Pengamatan tidak bekerja dalam transformasi CSS.
• , , .. , 0,0.