ResizeObserver - ein neues leistungsstarkes Tool zum Arbeiten mit Anpassungsfähigkeit

Ein bisschen Geschichte

Elementabfragen

Entwickler benötigen häufig die Möglichkeit, Elemente zu formatieren, wenn sie die Größe ihres übergeordneten Containers ändern, unabhängig vom Anzeigebereich. Anfragen nach Behältergrößen geben ihnen diese Möglichkeit. CSS-Verwendungsbeispiel:
.element: Medienbildschirm (min-width: 30em) {***}

Größe des Überwachungselements mithilfe der ResizeObserver-API ändern

Die ResizeObserver-API ist eine Schnittstelle zum Verfolgen der Größenänderung von Elementen. Dies ist eine Art Analogon zum window.resize-Ereignis für ein Element.

Beispiel: Ändern des Texts beim Ändern der Größe eines Elements

<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 erschien in der vorläufigen Entwicklungsphase von ResizeObserver und wurde nur im Interesse der aktuellen Kompatibilität hinzugefügt. Wahrscheinlich wird es in Zukunft als veraltet angesehen.

Elementbeobachtung

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

Blockmodell

Wann erfährt ein Beobachter von Veränderungen?

• Die Beobachtung wird ausgelöst, wenn ein beobachteter Gegenstand zum DOM hinzugefügt / daraus entfernt wird.
• Die Beobachtung wird ausgelöst, wenn die Anzeigeeigenschaft des beobachteten Elements auf none gesetzt ist.
• Die Beobachtung funktioniert nicht für "unsubstituierte" Linienelemente.
• Beobachtung funktioniert bei der CSS-Transformation nicht.
• , , .. , 0,0.