Resumo

  • Em 11 de fevereiro de 2020, o W3C publicou o primeiro rascunho público de Resize Observer, uma API para observar mudanças no tamanho de um elemento e entregar as medidas a uma função de retorno.
  • O rascunho editorial do CSSWG descreve as caixas de conteúdo, borda e conteúdo em pixels do dispositivo, além da entrega de notificações durante a renderização e do tratamento de alterações que não foram entregues naquele ciclo.

Um painel pode colocar uma pequena tabela ao lado de um gráfico. A grade externa decide quanto espaço cada um recebe. Se a barra lateral se abre, o gráfico encolhe, mesmo que a janela do navegador continue do mesmo tamanho. O código do gráfico sabe quantos rótulos cabem no eixo; a grade não sabe. A grade sabe quanto espaço distribuiu; o gráfico não manda nela. Uma medida localizada resolve a conversa.

O primeiro rascunho público do W3C, de 11 de fevereiro de 2020, apresenta ResizeObserver para acompanhar o tamanho de elementos. observe() registra um alvo; quando a caixa observada muda, uma entrada chega à função de retorno. unobserve() retira um alvo e disconnect() encerra as observações daquela instância. O histórico oficial de publicação do W3C confirma o marco de 2020. O alvo da medição passa a ser a peça que precisa se adaptar.

No cartão do gráfico, o navegador calcula a nova largura após a movimentação do painel e fornece a entrada de tamanho. O autor do gráfico pode abreviar os rótulos, mudar a legenda ou desenhar novamente. A medida é compartilhada; a decisão é local. A página pode reorganizar a grade sem conhecer o código de cada gráfico que abriga.

O rascunho editorial Resize Observer Module Level 1 do CSSWG especifica três opções: content-box, border-box e device-pixel-content-box. A primeira trata da área útil para o conteúdo, a segunda inclui a borda, a terceira expressa a área do conteúdo em pixels do dispositivo antes das transformações CSS. Uma coluna de texto, um cartão emoldurado e um canvas que precisa de nitidez pedem réguas diferentes. A escolha correta começa pela pergunta que se quer responder.

A opção passada a observe() define qual caixa, ao mudar, aciona a entrega. A entrada recebida contém informações de tamanho. Convém distinguir o gatilho da informação disponível no retorno, sobretudo quando um componente refaz trabalho a cada aviso. Ao sair da página, ele pode retirar o observador; deixar a trena pendurada numa parede demolida não ajuda ninguém.

Uma reação mal pensada cria uma dança infinita: o retorno considera o cartão estreito e o alarga; o tamanho novo o faz estreitar; e a conversa recomeça. O rascunho do CSSWG situa o processamento no ciclo de renderização e usa a profundidade dos elementos para limitar entregas repetidas nesse ciclo. Mudanças pendentes podem gerar uma notificação de erro de loop e ser tratadas em um quadro posterior. O autor precisa fazer a adaptação convergir, por exemplo ajustando o desenho dentro da área recebida sem fazer a própria área oscilar.

O documento do CSSWG é um rascunho de editores datado de 22 de novembro de 2022; o registro do W3C situa o primeiro rascunho público em 2020. Juntos, mostram o tamanho da invenção: uma medida pequena, colocada na mão certa. O navegador sabe o espaço que o layout realmente deu ao componente. O componente sabe o que fazer com ele.