Léxico de TI › Web › Resize Observer

Resize Observer

Web Svenska → Atualizado: 2026-09-30

API da web que avisa quando o tamanho de um elemento específico muda, e não apenas o da janela inteira. Resolve o problema de reagir a um único contêiner que muda de dimensão, seja qual for o motivo (janela, layout, conteúdo).

O problema antigo: o evento window.resize só diz que a JANELA mudou, não se um elemento mudou de tamanho por outro motivo (uma barra lateral que se abriu, conteúdo que cresceu, uma redistribuição de flex). Consultar o tamanho do elemento de tempos em tempos era caro e truncado. O Resize Observer chama seu callback exatamente quando o tamanho do elemento observado muda, com as novas dimensões, de forma eficiente e sem layout thrashing.

Casos de uso: redesenhar um canvas ou gráfico quando o contêiner muda, soluções de "container query" em JS (antes de existirem no CSS), adaptar um componente à própria largura. É um do trio de observers (Intersection, Resize, Mutation). Hoje as container queries do CSS cobrem o que é puramente estilo, mas o Resize Observer continua necessário quando o JS precisa reagir às dimensões.

← Voltar ao léxico