ResizeObserver - un nouvel outil puissant pour travailler avec l'adaptabilité

Un peu d'histoire

Requêtes d'élément

Les développeurs ont souvent besoin de pouvoir styliser des éléments lorsqu'ils redimensionnent leur conteneur parent, quelle que soit la zone d'affichage. Les demandes de tailles de conteneurs leur donnent cette opportunité. Exemple d'utilisation CSS:
écran .element: media (min-width: 30em) {***}

Surveillance du redimensionnement des éléments à l'aide de l'API ResizeObserver

L'API ResizeObserver est une interface de suivi du redimensionnement des éléments. Il s'agit d'une sorte d'analogue de l'événement window.resize pour un élément.

Exemple: changement de texte lors du redimensionnement d'un élément

<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 est apparu au stade de développement préliminaire de ResizeObserver et n'a été ajouté que dans l'intérêt de la compatibilité actuelle. À l'avenir, il sera probablement considéré comme obsolète.

Observation d'élément

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

Modèle de bloc

Quand un observateur est-il informé des changements?

• L'observation est déclenchée lorsqu'un élément observé est ajouté / supprimé du DOM.
• L'observation est déclenchée lorsque la propriété d'affichage de l'élément observé est définie sur aucune.
• L'observation ne fonctionne pas pour les éléments de ligne «non substitués».
• L'observation ne fonctionne pas dans la transformation CSS.
• , , .. , 0,0.