A criação de sites reativos e responsivos costumava ser considerada avançada, mas a capacidade de resposta é uma necessidade para sites e aplicativos bem-sucedidos. Adicionamos as consultas de mídia, matchMediae uma série de outras APIs para ajudar os desenvolvedores a facilitar a capacidade de resposta e agora temos uma nova: ResizeObserver. Com a API Resize Observer, podemos observar o redimensionamento de elementos individuais!
Usando ResizeObserver
Para ouvir as alterações de redimensionamento nos elementos, crie um ResizeObserver e chame o observe, passando um elemento:
const observer = new ResizeObserver(entries => {
for (let entry of entries) {
// Now do something with the resized element
if (entry.contentRect.width
An entry provides you a target element as well as its dimensions and positioning:
entry = {
target: div, // The element passed to `observe`
contentRect: {
bottom: 88,
height: 88,
left: 0,
right: 1043,
top: 0,
width: 1043,
x: 0,
y: 0
}
}
Consultas de mídia e matchMedia oferecem uma oportunidade de ajustar a exibição via CSS, mas não a funcionalidade, que é onde o ResizeObserver se encaixa.
Anos atrás, criei um hack para espionar elementos usando CSS, media queries e :beforemas ele exigia sondagem via JavaScript para funcionar corretamente. Ter uma API JavaScript legítima e otimizada para fazer o mesmo é revigorante e extremamente necessário!
