ResizeObserver - uma nova ferramenta poderosa para trabalhar com adaptabilidade

Um pouco de história

Consultas de elemento

Os desenvolvedores geralmente precisam da capacidade de estilizar elementos quando redimensionam seu contêiner pai, independentemente da área de visualização. Pedidos de tamanhos de contêineres oferecem a eles essa oportunidade. Exemplo de uso de CSS:
tela .element: media (largura mínima: 30em) {***}

Monitorando o redimensionamento do elemento usando a API ResizeObserver

A API ResizeObserver é uma interface para rastrear o redimensionamento de elementos. Este é um tipo de análogo do evento window.resize para um elemento.

Exemplo: alterando texto ao redimensionar um elemento

<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'
    }
    ...
}

O contentRect apareceu no estágio de desenvolvimento preliminar do ResizeObserver e foi adicionado apenas no interesse da compatibilidade atual. Provavelmente no futuro será considerado obsoleto.

Observação de elementos

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

Modelo de bloco

Quando um observador descobre mudanças?

• A observação é acionada quando um item observado é adicionado / removido do DOM.
• A observação é acionada quando a propriedade de exibição do elemento observado é definida como nenhuma.
• A observação não funciona para elementos de linha "não substituídos".
• A observação não funciona na transformação de CSS.
• , , .. , 0,0.