Resumen

  • El W3C publicó el primer borrador público de Resize Observer el 11 de febrero de 2020. La API observa cambios en el tamaño de un elemento y entrega entradas a una función de respuesta.
  • El borrador editorial de CSSWG distingue entre caja de contenido, caja de borde y caja de contenido en píxeles del dispositivo. También describe cómo se entregan los avisos durante el ciclo de renderizado y qué ocurre con los cambios que quedan pendientes.

Una tarjeta de noticias puede estrecharse mientras la ventana del navegador permanece inmóvil. Basta abrir un panel lateral. El gráfico que vive en la tarjeta necesita reducir sus etiquetas o cambiar su dibujo; el panel lateral no sabe cómo funcionan los ejes del gráfico. El tamaño de la ventana era una pista demasiado lejana. Había que medir la pieza a la que le faltaba aire.

El primer borrador público del W3C, de 11 de febrero de 2020, presentó una API para observar cambios de tamaño de un Element. Un ResizeObserver registra objetivos mediante observe() y envía entradas a una función de respuesta cuando cambia la caja observada. Se puede dejar de observar un objetivo con unobserve() o cerrar las observaciones con disconnect(). El historial de publicación del W3C confirma la fecha del primer borrador público. La medida, por fin, se refería al componente que debía tomar la decisión.

Volvamos al gráfico. La cuadrícula de la página le concede una anchura nueva tras mover el panel. El navegador calcula esa disposición y comunica la medida. El autor del gráfico puede ocultar algunas marcas, cambiar una leyenda o redibujar el lienzo. El observador informa; el código de la tarjeta decide. Esa división permite que la página organice el espacio sin conocer cada detalle de los componentes que coloca dentro.

La palabra «tamaño» oculta varias reglas. El borrador editorial Resize Observer Module Level 1 del CSSWG permite observar content-box, border-box o device-pixel-content-box. La primera atiende al área de contenido. La segunda incluye el borde. La tercera expresa el contenido en píxeles físicos del dispositivo antes de las transformaciones CSS. Un bloque de texto, una tarjeta con marco y un dibujo nítido sobre canvas pueden necesitar medidas distintas. Elegir la caja correcta es elegir qué problema se está resolviendo.

La opción de caja determina qué cambio provoca una notificación. La entrada que recibe la función también contiene datos de tamaño. La diferencia parece pequeña hasta que un componente empieza a reaccionar a cada variación que no le importa. Las operaciones para retirar objetivos y desconectar el observador completan el contrato: cuando la tarjeta desaparece, puede llevarse su cinta métrica.

Hay una comedia involuntaria al otro lado de la función de respuesta. Detecta que la tarjeta está estrecha y la ensancha; la medida cambia, así que la estrecha; la medida cambia otra vez. El navegador no puede dedicar un fotograma entero a ese baile. El borrador del CSSWG coloca el procesamiento dentro del ciclo de renderizado y organiza las entregas según la profundidad de los elementos. Los cambios que queden sin entregar pueden dar lugar a un error de bucle y pasar a un fotograma posterior.

Quien diseña el componente debe lograr que la reacción se estabilice: adaptar el contenido al espacio recibido en lugar de hacer oscilar la caja que está observando.

El texto del CSSWG lleva fecha de 22 de noviembre de 2022 y es un borrador editorial. El registro del W3C fija el primer borrador público en 2020. Esas fuentes describen la idea con precisión: medir el espacio propio de una pieza, comunicar el cambio y dejar a su autor la decisión de cómo aprovecharlo. El navegador entrega la cifra; el buen criterio sigue sin venir incluido en la caja.